综合开发

CSS3 animation was, but is no longer working in webkit broswers

微信扫一扫,分享到朋友圈

CSS3 animation was, but is no longer working in webkit broswers

I have two divs that I want to fade in and slide toward each other, so I have 3 animations: fadeIn, slideRight, and slideLeft. These animations were all working in Firefox AND webkit browsers, but suddenly slideRight stopped working in webkit browsers. That element still fades in and the other element still fades in and slides left.

I’ve looked at it for hours (including looking at countless other stackoverflow answers) and am extremely confused because of the other working parts. Let me know if you can think of what could be wrong!

css:

@-webkit-keyframes slideRight{
from{-webkit-transform:translateX(-20px)}
to{-webkit-transform:translateX(0)}
}
@-moz-keyframes slideRight{
from{-moz-transform:translateX(-20px)}
to{-moz-transform:translateX(0)}
}
@-o-keyframes slideRight{
from{-o-transform:translateX(-20px)}
to{-o-transform:translateX(0)}
}
@keyframes slideRight{
from{transform:translateX(-20px)}
to{transform:translateX(0)}
}
@-webkit-keyframes slideLeft{
from{-webkit-transform:translateX(20px)}
to{-webkit-transform:translateX(0)}
}
@-moz-keyframes slideLeft{
from{-moz-transform:translateX(20px)}
to{-moz-transform:translateX(0)}
}
@-o-keyframes slideLeft{
from{-o-transform:translateX(20px)}
to{-o-transform:translateX(0)}
}
@keyframes slideLeft{
from{transform:translateX(20px)}
to{transform:translateX(0)}
}
@-webkit-keyframes fadeIn{
from{opacity:0}to{opacity:1}
}
@-moz-keyframes fadeIn{
from{opacity:0}to{opacity:1}
}
@-o-keyframes fadeIn{
from{opacity:0}to{opacity:1}
}
@keyframes fadeIn{
from{opacity:0}to{opacity:1}
}
#left{
display: inline-block;
-webkit-animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
-moz-animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
-o-animzation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
#right{
display: inline-block;
-webkit-animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
-moz-animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
-o-animzation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

html is simply:

<div id="left">
/* some content */
</div>
<div id="right">
/* some content */
<div>

The website is http://gavel.co
so you can see what is happening. Please let me know if any other information would be helpful! Thanks so much.

Problem courtesy of: Laura Del Beccaro

微信扫一扫,分享到朋友圈

CSS3 animation was, but is no longer working in webkit broswers

史上最冷清情人节,这部全网好评的新片,最适合今天看

上一篇

马赛克打到手酸,但这片真的很高级

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

CSS3 animation was, but is no longer working in webkit broswers

长按储存图像,分享给朋友