站长素材 css3动画
建议使用谷歌浏览器或者是使用IE10及以上版本的浏览器
slideDown
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<title>slideDown-站长素材(zzsucai.com)</title>
6
<style>
7
.main{ text-align: center;}
8
.slideDown{
9
    animation-name: slideDown;
10
    -webkit-animation-name: slideDown;
11
​
12
    animation-duration: 1s;
13
    -webkit-animation-duration: 1s;
14
​
15
    animation-timing-function: ease;
16
    -webkit-animation-timing-function: ease;
17
​
18
    visibility: visible !important;
19
}
20
​
21
@keyframes slideDown {
22
    0% {
23
        transform: translateY(-100%);
24
    }
25
    50%{
26
        transform: translateY(8%);
27
    }
28
    65%{
29
        transform: translateY(-4%);
30
    }
31
    80%{
32
        transform: translateY(4%);
33
    }
34
    95%{
35
        transform: translateY(-2%);
36
    }
37
    100% {
38
        transform: translateY(0%);
39
    }
40
}
41
​
42
@-webkit-keyframes slideDown {
43
    0% {
44
        -webkit-transform: translateY(-100%);
45
    }
46
    50%{
47
        -webkit-transform: translateY(8%);
48
    }
49
    65%{
50
        -webkit-transform: translateY(-4%);
51
    }
52
    80%{
53
        -webkit-transform: translateY(4%);
54
    }
55
    95%{
56
        -webkit-transform: translateY(-2%);
57
    }
58
    100% {
59
        -webkit-transform: translateY(0%);
60
    }
61
}
62
</style>
63
</head>
64
​
65
<body>
66
<div class="main">
67
<div id="object" class="slideDown"><img src="images/zzsucai.png"/></div>
68
</div>
69
</body>
70
</html>
71
​
slideUp