[Solved] Animations & Transitions Not Working in Firefox?!!

[MBM]

The syntax seems correct. The script runs in chrome but not in Firefox.

.leftrightdelay {
position: absolute;
-webkit-animation:LeftthenRight;
-webkit-animation-duration: 4.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in 0.8s;
-webkit-animation-fill-mode: both;
-moz-animation:LeftthenRight;
-moz-animation-duration: 4.0s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.8s;
-moz-animation-fill-mode: both;
}

@-moz-keyframes LeftthenRight {
0% {top: 40px;left: 0%;opacity:0;}
25% {top: 40px;left: 30%;}
35% {top: 40px;left: 30%;}
50% {top: 40px;left: 30%;}
60% {top: 40px;left: 30%;}
80% {top: 40px;left: 30%;
-moz-transform: translateX(-0px);}
100% {top: 40px;left: 30%;
-moz-transform: translateX(2000px);
}

http://codepen.io/Nullbreaker/pen/hFlHi

[sudhakar1]

Hi,
The Firefox expects the W3C property without the vendor prefix. so

@keyframes animation_m {
0% { transform:translate(100px,100px) scale(1); }
50% { transform: translate(00px,00px) scale(2); }
100% { transform:translate(100px,100px) scale(1); }
}

.class name{
animation-name: animation_m;
animation-duration: 2s;
timing-function: linear;
}
try this

[MBM]

That didn’t work. I wasn’t closing the braces correctly.

[Author]

Posts