css - 无法使 CSS3 动画播放

Question

我有下面的代码，我想让一些 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;
}

Answer 1

问题似乎出在您如何在类中设置动画。您正在使用 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;
}