CSS-Projects/animation-roll.css at main · FirmanKurniawan/CSS-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.animated {
    background-image: url(/css/images/logo.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top:95px;
    margin-bottom:60px;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
 }

 @-webkit-keyframes rollIn {
    0% {
       opacity: 0;
       -webkit-transform: translateX(-100%) rotate(-120deg);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateX(0px) rotate(0deg);
    }
 }

 @keyframes rollIn {
    0% {
       opacity: 0;
       transform: translateX(-100%) rotate(-120deg);
    }
    100% {
       opacity: 1;
       transform: translateX(0px) rotate(0deg);
    }
 }
 .rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
 }