CSS animation working differently in Chrome - html

Question

I am using CSS animation. The IE and Firefox browsers are working fine but in Chrome the wheels keep spinning even after the car is gone.
body {
font-family: Helvetica, Arial, sans-serif;
margin: 0px;
}
#headline1, #headline2{
background-image: url(http://i.share.pho.to/6846bb0a_o.png);
background-repeat: no-repeat;
width: 261px;
height: 25px;
position: absolute;
top: 20px;
left: 20px;
}
#headline1{
-webkit-animation: fade-in .1s ease 6s 1 reverse forwards;
-moz-animation: fade-in .1s ease 6s 1 reverse forwards;
-o-animation: fade-in .1s ease 6s 1 reverse forwards;
animation: fade-in .1s ease 6s 1 reverse forwards;
}
#headline2 {
background-position: 0px -25px;
top: 40px;
-webkit-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
-moz-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
-o-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
}
button {
background: #FFCB05;
height: 34px;
width: 130px;
border: none;
z-index: 999;
border-radius: 17px;
color: #000;
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
-webkit-animation: fade-in 1s ease 7s 1 both;
-moz-animation: fade-in 1s ease 7s 1 both;
-o-animation: fade-in 1s ease 7s 1 both;
animation: fade-in 1s ease 7s 1 both;
}
button:hover,
button:active {
background-color: #FFD716;
}
.sub-copy {
color: #FFF;
position: absolute;
margin-left: 25px;
top: 40px;
-webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}
#dis {
background-image: url(http://i.share.pho.to/4516683d_o.jpeg);
background-repeat: no-repeat;
width: 138px;
height: 19px;
position: absolute;
margin-left: 22px;
top: 206px;
-webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}
#logo {
background-image: url(http://i.share.pho.to/306d2b9c_o.png);
background-repeat: no-repeat;
width: 103px;
height: 26px;
position: absolute;
bottom: 20px;
right: 20px;
}
#tag-line {
background-image: url(http://i.share.pho.to/e62322ba_o.jpeg);
background-repeat: no-repeat;
width: 207px;
height: 40px;
position: absolute;
bottom: 153px;
left: 14px;
-webkit-animation: fade-in 1s ease 10.5s 1 both;
-moz-animation: fade-in 1s ease 10.5s 1 both;
-o-animation: fade-in 1s ease 10.5s 1 both;
animation: fade-in 1s ease 10.5s 1 both;
}
#girl-arm {
position: absolute;
top: 141px;
left: 133px;
width: 9px;
height: 5px;
z-index: 7;
opacity: 0;
background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
background-repeat: no-repeat;
background-position: -37px -34px;
-webkit-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
-moz-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
-o-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
}
#girl-1 {
position: absolute;
top: 107px;
left: 96px;
width: 84px;
height: 85px;
background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#clock-lamp {
position: absolute;
top: 104px;
left: 184px;
width: 24px;
height: 88px;
background-image: url(http://i.share.pho.to/d264b4e6_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#clock2 {
position: absolute;
top: 74px;
left: 181px;
width: 29px;
height: 117px;
background-image: url(http://i.share.pho.to/24b90b3c_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
-moz-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
-o-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
-ms-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
}
#desk-car {
position: absolute;
top: 102px;
left: 33px;
width: 204px;
height: 90px;
z-index: 5;
background-image: url(http://i.share.pho.to/0c2e3ceb_o.png);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
-moz-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
-o-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
}
#window-l, #window-r{
position: absolute;
top: 79px;
width: 59px;
height: 69px;
background-image: url(http://i.share.pho.to/4bf00ac7_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#window-l{
left: 18px;
}
#window-r{
left: 218px;
}
#wheel-l, #wheel-r{
position: absolute;
top: 157px;
width: 32px;
height: 33px;
opacity: 0;
z-index: 9;
background-image: url(http://i.share.pho.to/08185b2c_o.png);
background-repeat: no-repeat;
-webkit-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
-moz-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
-o-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
}
#wheel-l{
left: 57px;
}
#wheel-r{
left: 184px;
}
#ad {
display: block;
border: rgb(145, 153, 153) 1px solid;
overflow: hidden;
cursor: pointer;
width: 298px;
height: 248px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#banner {
position: absolute;
display: block;
width: 300px;
height: 250px;
background-color: #000;
background-position: 0px 0px;
background-repeat: no-repeat;
overflow: hidden;
}
.buttons {
position: absolute;
z-index: 20;
top: 110px;
left: 20px;
}
/* ANIMATIONS */
/* WEBKIT */
#-webkit-keyframes frame-animation {
0% {background-position: 0 0; }
100% {background-position: 0 -4920px; }
}
#-webkit-keyframes frame-girl-1 {
0% {background-position: 0 0; }
100% {background-position: -364px 0; }
}
#-webkit-keyframes frame-girl-2 {
0% {background-position: 0 0; opacity: 1; }
100% {background-position: -364px 0; opacity: 1; }
}
#-webkit-keyframes frame-clock-lamp {
0% {background-position: 0 0;}
100% {background-position: -660px 0;}
}
#-webkit-keyframes move-left {
from {-webkit-transform: translateX(0);}
to {-webkit-transform: translateX(-250px);}
}
#-webkit-keyframes frame-desk-car {
0% {background-position: 0 0;}
100% {background-position: 0 -2418px;}
}
#-webkit-keyframes frame-window {
0% {background-position: 0 0;}
100% {background-position: -354px 0;}
}
#-webkit-keyframes roll-wheel {
0%{-webkit-transform: rotate(0deg); opacity: 1;}
100% {-webkit-transform: rotate(360deg); opacity: 1;}
}
#-webkit-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes mask-in {
0% {background-position: 0 -50px; opacity: 0;}
100% {background-position: 0 -25px; opacity: 1;}
}
#-webkit-keyframes rotate-arm {
0%{-webkit-transform: rotate(0deg); -webkit-transform-origin: 0% 0%; opacity: 1;}
100% {-webkit-transform: rotate(-10deg); -webkit-transform-origin: 0% 0%; opacity: 1;}
}
/* MOZ */
#-moz-keyframes frame-animation {
0% {background-position: 0 0; }
100% {background-position: 0 -4920px; }
}
#-moz-keyframes frame-girl-1 {
0% {background-position: 0 0; }
100% {background-position: -364px 0; }
}
#-moz-keyframes frame-girl-2 {
0% {background-position: 0 0; opacity: 1; }
100% {background-position: -364px 0; opacity: 1; }
}
#-moz-keyframes frame-clock-lamp {
0% {background-position: 0 0;}
100% {background-position: -660px 0;}
}
#-moz-keyframes move-left {
from {-moz-transform: translateX(0);}
to {-moz-transform: translateX(-250px);}
}
#-moz-keyframes frame-desk-car {
0% {background-position: 0 0;}
100% {background-position: 0 -2418px;}
}
#-moz-keyframes frame-window {
0% {background-position: 0 0;}
100% {background-position: -354px 0;}
}
#-moz-keyframes roll-wheel {
0%{-moz-transform: rotate(0deg); opacity: 1;}
100% {-moz-transform: rotate(360deg); opacity: 1;}
}
#-moz-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-moz-keyframes mask-in {
0% {background-position: 0 -50px; opacity: 0;}
100% {background-position: 0 -25px; opacity: 1;}
}
#-moz-keyframes rotate-arm {
0%{-moz-transform: rotate(0deg); -moz-transform-origin: 0% 0%; opacity: 1;}
100% {-moz-transform: rotate(-10deg); -moz-transform-origin: 0% 0%; opacity: 1;}
}
/* ms */
#-ms-keyframes frame-animation {
0% {background-position: 0 0; }
100% {background-position: 0 -4920px; }
}
#-ms-keyframes frame-girl-1 {
0% {background-position: 0 0; }
100% {background-position: -364px 0; }
}
#-ms-keyframes frame-girl-2 {
0% {background-position: 0 0; opacity: 1; }
100% {background-position: -364px 0; opacity: 1; }
}
#-ms-keyframes frame-clock-lamp {
0% {background-position: 0 0;}
100% {background-position: -660px 0;}
}
#-ms-keyframes move-left {
from {-ms-transform: translateX(0);}
to {-ms-transform: translateX(-250px);}
}
#-ms-keyframes frame-desk-car {
0% {background-position: 0 0;}
100% {background-position: 0 -2418px;}
}
#-ms-keyframes frame-window {
0% {background-position: 0 0;}
100% {background-position: -354px 0;}
}
#-ms-keyframes roll-wheel {
0%{-ms-transform: rotate(0deg); opacity: 1;}
100% {-ms-transform: rotate(360deg); opacity: 1;}
}
#-ms-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-ms-keyframes mask-in {
0% {background-position: 0 -50px; opacity: 0;}
100% {background-position: 0 -25px; opacity: 1;}
}
#-ms-keyframes rotate-arm {
0%{-ms-transform: rotate(0deg); -ms-transform-origin: 0% 0%; opacity: 1;}
100% {-ms-transform: rotate(-10deg); -ms-transform-origin: 0% 0%; opacity: 1;}
}
/* O */
#-o-keyframes frame-animation {
0% {background-position: 0 0; }
100% {background-position: 0 -4920px; }
}
#-o-keyframes frame-girl-1 {
0% {background-position: 0 0; }
100% {background-position: -364px 0; }
}
#-o-keyframes frame-girl-2 {
0% {background-position: 0 0; opacity: 1; }
100% {background-position: -364px 0; opacity: 1; }
}
#-o-keyframes frame-clock-lamp {
0% {background-position: 0 0;}
100% {background-position: -660px 0;}
}
#-o-keyframes move-left {
from {-o-transform: translateX(0);}
to {-o-transform: translateX(-250px);}
}
#-o-keyframes frame-desk-car {
0% {background-position: 0 0;}
100% {background-position: 0 -2418px;}
}
#-o-keyframes frame-window {
0% {background-position: 0 0;}
100% {background-position: -354px 0;}
}
#-o-keyframes roll-wheel {
0%{-o-transform: rotate(0deg); opacity: 1;}
100% {-o-transform: rotate(360deg); opacity: 1;}
}
#-o-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-o-keyframes mask-in {
0% {background-position: 0 -50px; opacity: 0;}
100% {background-position: 0 -25px; opacity: 1;}
}
#-o-keyframes rotate-arm {
0%{-o-transform: rotate(0deg); -o-transform-origin: 0% 0%; opacity: 1;}
100% {-o-transform: rotate(-10deg); -o-transform-origin: 0% 0%; opacity: 1;}
}
/* STANDARD */
#-keyframes frame-animation {
0% {background-position: 0 0; }
100% {background-position: 0 -4920px; }
}
#-keyframes frame-girl-1 {
0% {background-position: 0 0; }
100% {background-position: -364px 0; }
}
#-keyframes frame-girl-2 {
0% {background-position: 0 0; opacity: 1; }
100% {background-position: -364px 0; opacity: 1; }
}
#-keyframes frame-clock-lamp {
0% {background-position: 0 0;}
100% {background-position: -660px 0;}
}
#-keyframes move-left {
from {-transform: translateX(0);}
to {-transform: translateX(-250px);}
}
#-keyframes frame-desk-car {
0% {background-position: 0 0;}
100% {background-position: 0 -2418px;}
}
#-keyframes frame-window {
0% {background-position: 0 0;}
100% {background-position: -354px 0;}
}
#-keyframes roll-wheel {
0%{-transform: rotate(0deg); opacity: 1;}
100% {-transform: rotate(360deg); opacity: 1;}
}
#-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-keyframes mask-in {
0% {background-position: 0 -50px; opacity: 0;}
100% {background-position: 0 -25px; opacity: 1;}
}
#-keyframes rotate-arm {
0%{-transform: rotate(0deg); -transform-origin: 0% 0%; opacity: 1;}
100% {-transform: rotate(-10deg); -transform-origin: 0% 0%; opacity: 1;}
}
<div id="ad">
<div id="banner">
<div id="headline1">
</div>
<div id="headline2">
</div>
<div id="tag-line">
</div>
<div id="wheel-l">
</div>
<div id="wheel-r">
</div>
<div id="desk-car">
</div>
<div id="girl-arm">
</div>
<div id="girl-1">
</div>
<div id="girl-2">
</div>
<br>
<div id="clock-lamp">
</div>
<div id="clock2">
</div>
<div id="window-l">
</div>
<div id="window-r">
</div>
<div class="sub-copy">To enter, open a CommSec International Account and <br/> place a trade from <strong>US$19.95</strong>.
</div>
<div id="dis">
</div>
<div class="buttons">
<button id="clickthrough-button" class="button clickthrough">Find out more »
</button>
</div>
<div id="logo"></div>
</div>
</div>
-webkit-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
-moz-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
-ms-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
-o-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
The above CSS is for wheel animation which is not working in Chrome. Can someone help me how can I fix the Chrome wheel spinning issue. This is the JSFiddle version.
The screencast showing I am seeing this in Chrome.

Answer 1

This seems to be a bug in older versions of Chrome (seen till v38) which seems to have got fixed now (based on the comments to question). However, you need to make note of the following things:
The roll wheel animation has a duration of 1.5s and is supposed to start after a delay of 3.3s. The animation has 5 iterations and so this whole animation would effectively complete only after 10.8s from start (3.3s + (1.5s * 5)).
The fade-in animation has a duration of .1s and is supposed to start after a delay of 6s. Because of this animation, the element is supposed to have faded out of view at 6.1s mark. (But this is not happening due to some bug in older versions).
Now, if you look carefully, at 6.1s not even 2 iterations of the roll wheel animation would have got completed and hence the iteration count that is set doesn't really make much sense and it needs to be reduced but even if we reduce it to 2, the animation would end only at 6.3s. So, change the duration of roll wheel animation to 1.4s and set the iteration count to just 2. This should fix it.
In the below snippet, I have made the change only for -webkit-animation but this should work in all browsers. I had tested in Chrome, Firefox but please test it out before modifying the others.
Now coming to the bug itself, ideally, when more than one animation is modifying the same property then the one that is specified last should take priority. So, in this case the opacity change within the fade-in animation should have taken priority and faded out the wheels but it is not happening. So, the only solution we are left with is to modify the duration and iteration of roll wheel animation in order to make sure that it completes at the same time the fade-in completes.
As per W3C Spec
If at one point in time there are multiple animations specifying behavior for the same property, the animation which occurs last in the value of animation-name will override the other animations at that point.
body {
font-family: Helvetica, Arial, sans-serif;
margin: 0px;
}
#headline1,
#headline2 {
background-image: url(http://i.share.pho.to/6846bb0a_o.png);
background-repeat: no-repeat;
width: 261px;
height: 25px;
position: absolute;
top: 20px;
left: 20px;
}
#headline1 {
-webkit-animation: fade-in .1s ease 6s 1 reverse forwards;
-moz-animation: fade-in .1s ease 6s 1 reverse forwards;
-o-animation: fade-in .1s ease 6s 1 reverse forwards;
animation: fade-in .1s ease 6s 1 reverse forwards;
}
#headline2 {
background-position: 0px -25px;
top: 40px;
-webkit-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
-moz-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
-o-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
}
button {
background: #FFCB05;
height: 34px;
width: 130px;
border: none;
z-index: 999;
border-radius: 17px;
color: #000;
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
-webkit-animation: fade-in 1s ease 7s 1 both;
-moz-animation: fade-in 1s ease 7s 1 both;
-o-animation: fade-in 1s ease 7s 1 both;
animation: fade-in 1s ease 7s 1 both;
}
button:hover,
button:active {
background-color: #FFD716;
}
.sub-copy {
color: #FFF;
position: absolute;
margin-left: 25px;
top: 40px;
-webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}
#dis {
background-image: url(http://i.share.pho.to/4516683d_o.jpeg);
background-repeat: no-repeat;
width: 138px;
height: 19px;
position: absolute;
margin-left: 22px;
top: 206px;
-webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
-o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}
#logo {
background-image: url(http://i.share.pho.to/306d2b9c_o.png);
background-repeat: no-repeat;
width: 103px;
height: 26px;
position: absolute;
bottom: 20px;
right: 20px;
}
#tag-line {
background-image: url(http://i.share.pho.to/e62322ba_o.jpeg);
background-repeat: no-repeat;
width: 207px;
height: 40px;
position: absolute;
bottom: 153px;
left: 14px;
-webkit-animation: fade-in 1s ease 10.5s 1 both;
-moz-animation: fade-in 1s ease 10.5s 1 both;
-o-animation: fade-in 1s ease 10.5s 1 both;
animation: fade-in 1s ease 10.5s 1 both;
}
#girl-arm {
position: absolute;
top: 141px;
left: 133px;
width: 9px;
height: 5px;
z-index: 7;
opacity: 0;
background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
background-repeat: no-repeat;
background-position: -37px -34px;
-webkit-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
-moz-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
-o-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
}
#girl-1 {
position: absolute;
top: 107px;
left: 96px;
width: 84px;
height: 85px;
background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#clock-lamp {
position: absolute;
top: 104px;
left: 184px;
width: 24px;
height: 88px;
background-image: url(http://i.share.pho.to/d264b4e6_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#clock2 {
position: absolute;
top: 74px;
left: 181px;
width: 29px;
height: 117px;
background-image: url(http://i.share.pho.to/24b90b3c_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
-moz-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
-o-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
-ms-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
}
#desk-car {
position: absolute;
top: 102px;
left: 33px;
width: 204px;
height: 90px;
z-index: 5;
background-image: url(http://i.share.pho.to/0c2e3ceb_o.png);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
-moz-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
-o-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
}
#window-l,
#window-r {
position: absolute;
top: 79px;
width: 59px;
height: 69px;
background-image: url(http://i.share.pho.to/4bf00ac7_o.gif);
background-repeat: no-repeat;
-webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
-o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#window-l {
left: 18px;
}
#window-r {
left: 218px;
}
#wheel-l,
#wheel-r {
position: absolute;
top: 157px;
width: 32px;
height: 33px;
opacity: 0;
z-index: 9;
background-image: url(http://i.share.pho.to/08185b2c_o.png);
background-repeat: no-repeat;
-webkit-animation: roll-wheel 1.4s linear 3.3s 2 none, fade-in .1s ease 6s 1 reverse forwards;
-moz-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
-o-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
}
#wheel-l {
left: 57px;
}
#wheel-r {
left: 184px;
}
#ad {
display: block;
border: rgb(145, 153, 153) 1px solid;
overflow: hidden;
cursor: pointer;
width: 298px;
height: 248px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#banner {
position: absolute;
display: block;
width: 300px;
height: 250px;
background-color: #000;
background-position: 0px 0px;
background-repeat: no-repeat;
overflow: hidden;
}
.buttons {
position: absolute;
z-index: 20;
top: 110px;
left: 20px;
}
/* ANIMATIONS */
/* WEBKIT */
#-webkit-keyframes frame-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -4920px;
}
}
#-webkit-keyframes frame-girl-1 {
0% {
background-position: 0 0;
}
100% {
background-position: -364px 0;
}
}
#-webkit-keyframes frame-girl-2 {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: -364px 0;
opacity: 1;
}
}
#-webkit-keyframes frame-clock-lamp {
0% {
background-position: 0 0;
}
100% {
background-position: -660px 0;
}
}
#-webkit-keyframes move-left {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-250px);
}
}
#-webkit-keyframes frame-desk-car {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -2418px;
}
}
#-webkit-keyframes frame-window {
0% {
background-position: 0 0;
}
100% {
background-position: -354px 0;
}
}
#-webkit-keyframes roll-wheel {
0% {
-webkit-transform: rotate(0deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg);
opacity: 1;
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes mask-in {
0% {
background-position: 0 -50px;
opacity: 0;
}
100% {
background-position: 0 -25px;
opacity: 1;
}
}
#-webkit-keyframes rotate-arm {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: rotate(-10deg);
-webkit-transform-origin: 0% 0%;
opacity: 1;
}
}
/* MOZ */
#-moz-keyframes frame-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -4920px;
}
}
#-moz-keyframes frame-girl-1 {
0% {
background-position: 0 0;
}
100% {
background-position: -364px 0;
}
}
#-moz-keyframes frame-girl-2 {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: -364px 0;
opacity: 1;
}
}
#-moz-keyframes frame-clock-lamp {
0% {
background-position: 0 0;
}
100% {
background-position: -660px 0;
}
}
#-moz-keyframes move-left {
from {
-moz-transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
}
}
#-moz-keyframes frame-desk-car {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -2418px;
}
}
#-moz-keyframes frame-window {
0% {
background-position: 0 0;
}
100% {
background-position: -354px 0;
}
}
#-moz-keyframes roll-wheel {
0% {
-moz-transform: rotate(0deg);
opacity: 1;
}
100% {
-moz-transform: rotate(360deg);
opacity: 1;
}
}
#-moz-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes mask-in {
0% {
background-position: 0 -50px;
opacity: 0;
}
100% {
background-position: 0 -25px;
opacity: 1;
}
}
#-moz-keyframes rotate-arm {
0% {
-moz-transform: rotate(0deg);
-moz-transform-origin: 0% 0%;
opacity: 1;
}
100% {
-moz-transform: rotate(-10deg);
-moz-transform-origin: 0% 0%;
opacity: 1;
}
}
/* ms */
#-ms-keyframes frame-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -4920px;
}
}
#-ms-keyframes frame-girl-1 {
0% {
background-position: 0 0;
}
100% {
background-position: -364px 0;
}
}
#-ms-keyframes frame-girl-2 {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: -364px 0;
opacity: 1;
}
}
#-ms-keyframes frame-clock-lamp {
0% {
background-position: 0 0;
}
100% {
background-position: -660px 0;
}
}
#-ms-keyframes move-left {
from {
-ms-transform: translateX(0);
}
to {
-ms-transform: translateX(-250px);
}
}
#-ms-keyframes frame-desk-car {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -2418px;
}
}
#-ms-keyframes frame-window {
0% {
background-position: 0 0;
}
100% {
background-position: -354px 0;
}
}
#-ms-keyframes roll-wheel {
0% {
-ms-transform: rotate(0deg);
opacity: 1;
}
100% {
-ms-transform: rotate(360deg);
opacity: 1;
}
}
#-ms-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes mask-in {
0% {
background-position: 0 -50px;
opacity: 0;
}
100% {
background-position: 0 -25px;
opacity: 1;
}
}
#-ms-keyframes rotate-arm {
0% {
-ms-transform: rotate(0deg);
-ms-transform-origin: 0% 0%;
opacity: 1;
}
100% {
-ms-transform: rotate(-10deg);
-ms-transform-origin: 0% 0%;
opacity: 1;
}
}
/* O */
#-o-keyframes frame-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -4920px;
}
}
#-o-keyframes frame-girl-1 {
0% {
background-position: 0 0;
}
100% {
background-position: -364px 0;
}
}
#-o-keyframes frame-girl-2 {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: -364px 0;
opacity: 1;
}
}
#-o-keyframes frame-clock-lamp {
0% {
background-position: 0 0;
}
100% {
background-position: -660px 0;
}
}
#-o-keyframes move-left {
from {
-o-transform: translateX(0);
}
to {
-o-transform: translateX(-250px);
}
}
#-o-keyframes frame-desk-car {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -2418px;
}
}
#-o-keyframes frame-window {
0% {
background-position: 0 0;
}
100% {
background-position: -354px 0;
}
}
#-o-keyframes roll-wheel {
0% {
-o-transform: rotate(0deg);
opacity: 1;
}
100% {
-o-transform: rotate(360deg);
opacity: 1;
}
}
#-o-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes mask-in {
0% {
background-position: 0 -50px;
opacity: 0;
}
100% {
background-position: 0 -25px;
opacity: 1;
}
}
#-o-keyframes rotate-arm {
0% {
-o-transform: rotate(0deg);
-o-transform-origin: 0% 0%;
opacity: 1;
}
100% {
-o-transform: rotate(-10deg);
-o-transform-origin: 0% 0%;
opacity: 1;
}
}
/* STANDARD */
#keyframes frame-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -4920px;
}
}
#keyframes frame-girl-1 {
0% {
background-position: 0 0;
}
100% {
background-position: -364px 0;
}
}
#keyframes frame-girl-2 {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: -364px 0;
opacity: 1;
}
}
#keyframes frame-clock-lamp {
0% {
background-position: 0 0;
}
100% {
background-position: -660px 0;
}
}
#keyframes move-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-250px);
}
}
#keyframes frame-desk-car {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -2418px;
}
}
#keyframes frame-window {
0% {
background-position: 0 0;
}
100% {
background-position: -354px 0;
}
}
#keyframes roll-wheel {
0% {
transform: rotate(0deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 1;
}
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes mask-in {
0% {
background-position: 0 -50px;
opacity: 0;
}
100% {
background-position: 0 -25px;
opacity: 1;
}
}
#keyframes rotate-arm {
0% {
transform: rotate(0deg);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
transform: rotate(-10deg);
transform-origin: 0% 0%;
opacity: 1;
}
}
<div id="ad">
<div id="banner">
<div id="headline1">
</div>
<div id="headline2">
</div>
<div id="tag-line">
</div>
<div id="wheel-l">
</div>
<div id="wheel-r">
</div>
<div id="desk-car">
</div>
<div id="girl-arm">
</div>
<div id="girl-1">
</div>
<div id="girl-2">
</div>
<br>
<div id="clock-lamp">
</div>
<div id="clock2">
</div>
<div id="window-l">
</div>
<div id="window-r">
</div>
<div class="sub-copy">To enter, open a CommSec International Account and
<br/>place a trade from <strong>US$19.95</strong>.
</div>
<div id="dis">
</div>
<div class="buttons">
<button id="clickthrough-button" class="button clickthrough">Find out more »
</button>
</div>
<div id="logo"></div>
</div>
</div>