animation-name
//HTMLhtml
|
1
2
3
4
|
<
div
id
=
"beastainer"
>
<
img
alt
=
""
src
=
"https://developer.cdn.mozilla.net/media/img/beast-404_LE.png"
id
=
"beast404le"
>
<
img
alt
=
""
src
=
"https://developer.cdn.mozilla.net/media/img/beast-404_RE.png"
id
=
"beast404re"
>
<
img
alt
=
""
src
=
"https://developer.cdn.mozilla.net/media/img/beast-404.png"
class
=
"beast 404"
>
|
//CSS3 animation-nameweb
#beastainer {spa
float: right;.net
padding: 20px 0 20px 20px;code
position: relative;cdn
}htm
#beast404re,#beast404le {ci
position: absolute;get
-webkit-animation-delay: 6s;animation
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
-ms-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running
}
#beast404re {
left: 231px;
top: 68px;
-webkit-animation-name: crazyrighteye;
-moz-animation-name: crazyrighteye;
-ms-animation-name: crazyrighteye;
animation-name: crazyrighteye
}
#beast404le {
left: 125px;
top: 65px;
-webkit-animation-name: crazylefteye;
-moz-animation-name: crazylefteye;
-ms-animation-name: crazylefteye;
animation-name: crazylefteye
}
@-moz-keyframes crazylefteye {
0% { left: 125px; top: 65px}
10% { left: 118px; top: 56px}
20% { left: 118px; top: 56px}
40% { left: 148px; top: 62px}
50% {left: 145px;top: 72px}
60% {left: 121px;top: 70px}
70% {left: 125px;top: 65px}
100% {left: 125px;top: 65px}
}
@-webkit-keyframes crazylefteye {
0% {left: 125px;top: 65px}
10% {left: 118px;top: 56px}
20% {left: 118px;top: 56px}
40% {left: 148px;top: 62px}
50% {left: 145px;top: 72px}
60% {left: 121px;top: 70px}
70% {left: 125px;top: 65px}
100% {left: 125px;top: 65px}
}
@-o-keyframes crazylefteye {
0% {left: 125px;top: 65px}
10% {left: 118px;top: 56px}
20% {left: 118px;top: 56px}
40% {left: 148px;top: 62px}
50% {left: 145px;top: 72px}
60% {left: 121px;top: 70px}
70% {left: 125px;top: 65px}
100% {left: 125px;top: 65px}
}
@-ms-keyframes crazylefteye {
0% {left: 125px;top: 65px}
10% {left: 118px;top: 56px}
20% {left: 118px;top: 56px}
40% {left: 148px;top: 62px}
50% {left: 145px;top: 72px}
60% {left: 121px;top: 70px}
70% {left: 125px;top: 65px}
100% {left: 125px;top: 65px}
}
@keyframes crazylefteye {
0% {left: 125px;top: 65px}
10% {left: 118px;top: 56px}
20% {left: 118px;top: 56px}
40% {left: 148px;top: 62px}
50% {left: 145px;top: 72px}
60% {left: 121px;top: 70px}
70% {left: 125px;top: 65px}
100% {left: 125px;top: 65px}
}
@-moz-keyframes crazyrighteye {
0% {left: 231px;top: 68px}
10% {left: 212px;top: 62px}
20% {left: 212px;top: 62px}
40% {left: 239px;top: 64px}
50% {left: 240px;top: 80px}
60% {left: 215px;top: 73px}
70% {left: 231px;top: 68px}
100% {left: 231px;top: 68px}
}
@-webkit-keyframes crazyrighteye {
0% {left: 231px;top: 68px}
10% {left: 212px;top: 62px}
20% {left: 212px;top: 62px}
40% {left: 239px;top: 64px}
50% {left: 240px;top: 80px}
60% {left: 215px;top: 73px}
70% {left: 231px;top: 68px}
100% {left: 231px;top: 68px}
}
@-o-keyframes crazyrighteye {
0% {left: 231px;top: 68px}
10% {left: 212px;top: 62px}
20% {left: 212px;top: 62px}
40% {left: 239px;top: 64px}
50% {left: 240px;top: 80px}
60% {left: 215px;top: 73px}
70% {left: 231px;top: 68px}
100% {left: 231px;top: 68px}
}
@-ms-keyframes crazyrighteye {
0% {left: 231px;top: 68px}
10% {left: 212px;top: 62px}
20% {left: 212px;top: 62px}
40% {left: 239px;top: 64px}
50% {left: 240px;top: 80px}
60% {left: 215px;top: 73px}
70% {left: 231px;top: 68px}
100% {left: 231px;top: 68px}
}
@keyframes crazyrighteye {
0% {left: 231px;top: 68px}
10% {left: 212px;top: 62px}
20% {left: 212px;top: 62px}
40% {left: 239px;top: 64px}
50% {left: 240px;top: 80px}
60% {left: 215px;top: 73px}
70% {left: 231px;top: 68px}
100% {left: 231px;top: 68px}
}
-
每一个你不满意的现在，都有一个你没有努力的曾经。