站长素材 css3动画
建议使用谷歌浏览器或者是使用IE10及以上版本的浏览器
rollOut
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<title>rollOut-站长素材(zzsucai.com)</title>
6
<style>
7
.div {
8
    width:300px;
9
    height:200px;
10
    margin:100px auto;
11
    background:url(images/zzsucai.png)
12
}
13
#animation {
14
-webkit-animation:rollOut 1s .2s ease both;
15
-moz-animation:rollOut 1s .2s ease both;
16
}
17
@-webkit-keyframes rollOut {
18
0% {
19
opacity:1;
20
-webkit-transform:translateX(0px) rotate(0deg)
21
}
22
100% {
23
opacity:0;
24
-webkit-transform:translateX(100%) rotate(120deg)
25
}
26
}
27
@-moz-keyframes rollOut {
28
0% {
29
opacity:1;
30
-moz-transform:translateX(0px) rotate(0deg)
31
}
32
100% {
33
opacity:0;
34
-moz-transform:translateX(100%) rotate(120deg)
35
}
36
}
37
</style>
38
</head>
39
<body>
40
<div id="animation" class="div"></div>
41
</body>
42
</html>
43
​
slideDown