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