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