我有下面的代码,我想让一些 div
反弹。现在他们似乎根本没有动,我哪里出错了?
这是一个fiddle
@-webkit-keyframes bounceup {
0% { -webkit-transform:translateY(0); }
40% { -webkit-transform:translateY(30px); }
60% { -webkit-transform:translateY(15px); }
}
@keyframes bounceup {
0% { transform:translateY(0); }
40% { transform:translateY(30px); }
60% { transform:translateY(15px); }
}
@-webkit-keyframes bounceleft {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(-30px); }
60% { -webkit-transform:translateX(-15px); }
}
@keyframes bounceleft {
0% { transform:translateX(0); }
40% { transform:translateX(-30px); }
60% { transform:translateX(-15px); }
}
@-webkit-keyframes bounceright {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(30px); }
60% { -webkit-transform:translateX(15px); }
}
@keyframes bounceright {
0% { transform:translateX(0); }
40% { transform:translateX(30px); }
60% { transform:translateX(15px); }
}
.bounceup {
-webkit-animation-name: bounceup 2s infinite;
animation-name: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation-name: bounceleft 2s infinite;
animation-name: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation-name: bounceright 2s infinite;
animation-name: bounceright 2s infinite;
}
最佳答案
问题似乎在于如何在类中设置动画。您正在使用animation-name
,但您声明的不仅仅是名称;您还要添加 animation-iteration-count
和 animation-duration
的值。
尝试一下:
.bounceup {
-webkit-animation: bounceup 2s infinite;
animation: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation: bounceleft 2s infinite;
animation: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
编辑:
似乎@Harry 修改了他的评论并指出了上述内容。基本上,您尝试使用 animation
的简写版本,但对于 animation-name
属性。
另一种解决方案是(非速记版本):
.bounceup {
animation-name: bounceup;
-webkit-animation-name: bounceup;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
关于css - 无法播放 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37593622/