//HTML
|
1
2
3
4
|
<div id="beastainer"> |
//CSS3 animation-name
#beastainer {
float: right;
padding: 20px 0 20px 20px;
position: relative;
}
#beast404re,#beast404le {
position: absolute;
-webkit-animation-delay: 6s;
-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}
}