animation-name

//HTML

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-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}

}