OLD | NEW |
1 body { | 1 body { |
2 width: 320px; | 2 width: 320px; |
3 height: 480px; | 3 height: 480px; |
4 } | 4 } |
5 | 5 |
6 #splash { | 6 #splash { |
7 position: absolute; | 7 position: absolute; |
8 left: 20px; | 8 left: 20px; |
9 left: 60px; | 9 left: 60px; |
10 width: 100px; | 10 width: 100px; |
11 height: 100px; | 11 height: 100px; |
12 background-color: blue; | 12 background-color: blue; |
13 -webkit-transform: translate3d(0,80px,0); | 13 transform: translate3d(0,80px,0); |
14 -webkit-animation-name: splashdown; | 14 -webkit-animation-name: splashdown; |
15 -webkit-animation-duration: 0.6s; | 15 -webkit-animation-duration: 0.6s; |
16 -webkit-animation-delay: 0.1s; | 16 -webkit-animation-delay: 0.1s; |
17 } | 17 } |
18 | 18 |
19 @-webkit-keyframes splashdown { | 19 @-webkit-keyframes splashdown { |
20 0% { | 20 0% { |
21 -webkit-transform: translate3d(0, -300px, 0); | 21 transform: translate3d(0, -300px, 0); |
22 } | 22 } |
23 30% { | 23 30% { |
24 -webkit-animation-timing-function: ease-in; | 24 -webkit-animation-timing-function: ease-in; |
25 -webkit-transform: translate3d(0, 20px, 0); | 25 transform: translate3d(0, 20px, 0); |
26 } | 26 } |
27 40% { | 27 40% { |
28 -webkit-animation-timing-function: ease-in-out; | 28 -webkit-animation-timing-function: ease-in-out; |
29 -webkit-transform: translate3d(0, 100px, 0); | 29 transform: translate3d(0, 100px, 0); |
30 } | 30 } |
31 90% { | 31 90% { |
32 -webkit-transform: translate3d(0, 100px, 0); | 32 transform: translate3d(0, 100px, 0); |
33 } | 33 } |
34 100% { | 34 100% { |
35 -webkit-transform: translate3d(0, 100px, 0); | 35 transform: translate3d(0, 100px, 0); |
36 } | 36 } |
37 } | 37 } |
OLD | NEW |