站长素材 css3动画
建议使用谷歌浏览器或者是使用IE10及以上版本的浏览器
zoomInLeft
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>zoomInLeft-站长素材(zzsucai.com)</title>
5
<style>
6
.div {
7
    width:300px;
8
    height:200px;
9
    margin:100px auto;
10
    background:url(images/zzsucai.png)
11
}
12
#animation {
13
-webkit-animation:zoomInLeft 1s .2s ease both;
14
-moz-animation:zoomInLeft 1s .2s ease both;
15
}
16
@keyframes zoomInLeft {
17
  from {
18
    opacity: 0;
19
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
20
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
21
  }
22
​
23
  60% {
24
    opacity: 1;
25
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
26
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
27
  }
28
}
29
@-webkit-keyframes zoomInLeft {
30
  from {
31
    opacity: 0;
32
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
33
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
34
  }
35
​
36
  60% {
37
    opacity: 1;
38
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
39
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
40
  }
41
}
42
</style>
43
</head>
44
<body>
45
<div id="animation" class="div"></div>
46
</body>
47
</html>
zoomInRight