I have an animation which should rotate 360 degrees 50% into the animation, but it's not working.
.w11 {
top:9px; font-
size:50px; color: black; opacity: 0.5;}
.w11 {animation: movefirst
12s linear infinite;
animation-direction:
alternate-reverse;
position: relative;}
#keyframes movefirst {0%
{left:23px;}50%
{transform:rotateX(3
60deg);}
100%{left:200px;}}
<div class="w11">e</div>
It works, you just had some extra space typos in your code.
.w11 {
position: relative;
top: 9px;
font-size:50px;
opacity: 0.5;
animation: movefirst 12s linear infinite;
animation-direction: alternate-reverse;
}
#keyframes movefirst {
0% {
left: 23px;
}
50% {
transform: rotateX(360deg);
}
100% {
left: 200px;
}
}
<div class="w11">e</div>
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.
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>
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo
I'm trying to animate a tractor moving across the screen. I've got it working perfectly on my screen, however I want it to work across different platforms (only included -webkit-). When I re-size, the tractor is fluid, but the wheels aren't. How can I make them adjust together?
<body>
<div class="container">
<div class="tractor">
<img src="img/tractor-700px.png" alt="tractor">
</div>
<div class="wheels">
<div class="b_wheel">
<img src="img/b_wheel.png">
</div>
<div class="f_wheel">
<img src="img/f_wheel.png">
</div>
</div>
</div>
Here's my main CSS:
.tractor {
width: 380px;
position: absolute;
top: 40%;
left: -5%;
}
.tractor img {
width: 100%;
}
.tractor::after {
content: "";
display: block;
width: 120px;
height: 120px;
background: url('img/steam.png') no-repeat;
background-size: 120px;
position: absolute;
top: -37%;
left: 56%;
opacity: 0;
}
.f_wheel {;
width: 125px;
position: absolute;
top: 66.5%;
left: 13%;
}
.f_wheel img {
width: 100%;
}
.b_wheel {
width: 190px;
position: absolute;
top: 58.8%;
left: -7%;
}
.b_wheel img {
width: 100%;
}
And CSS for the animation:
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor::after {
-webkit-animation: steam 4s 2s infinite;
}
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
}
.f_wheel {
-webkit-animation: front-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
.b_wheel {
-webkit-animation: back-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
/* Keyframes - WebKit only
------------------------------------------ */
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
#-webkit-keyframes tractor-go {
100% { left: 70%; }
}
#-webkit-keyframes steam {
40% { opacity: .8; }
60% { opacity: 1; }
100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
#-webkit-keyframes wheel-spin {
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
#-webkit-keyframes front-wheel-go {
100% { left: 88%; }
}
#-webkit-keyframes back-wheel-go {
100% { left: 68.5%; }
}
JSFiddle to show it in action: http://jsfiddle.net/0j5L92vh/1/
[PS - This is my first post here so many thanks in advance! Let me know if I need to include anything else.]
I found a solution to your problem.
I utilized the .container div you have provided to keep everything positioned relative
to your tractor image. You can see the changes in the css code that made will make
it work in non webkit browsers. It will not work on versions of Internet Explorer before number 9.
The changes I have made are only to your css.
jsfiddle: http://jsfiddle.net/larryjoelane/h324j6u6/113/
css:
.container{
width: 380px;
position: relative;
/*bind the animation and set its properties*/
-webkit-animation: tractor 10s linear 0s; /* Chrome, Safari, Opera */
animation: tractor 10s linear 0s;
}
/*bind the wheel-spin animation*/
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
animation: wheel-spin 10s ease-in-out forwards;
}
/*bind the tractor bounce-animation*/
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor img{
width:100%;
}
.b_wheel {
width: 190px;
position: relative;
top: -120px;
left: -7%;
}
.b_wheel img {
width: 100%;
}
.f_wheel{
width: 125px;
position:relative;
top: -258px;
left: 65%;
}
.f_wheel img {
width: 100%;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/* Standard syntax */
#keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/*standard browser animation*/
#keyframes wheel-spin{
0% { transform: translateX(0px) rotate(50deg); }
100% { transform: translateX(0px) rotate(480deg); }
}
/*webkit browser animation*/
#-webkit-keyframes wheel-spin{
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
/*webkit tractor-bounce animation*/
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
/*standard tractor-bounce web browser animation*/
#keyframes tractor-bounce {
50% { transform: rotate(-5deg) translateY(-3px); }
}