Question

我发现了一个CSS＆＃39;反弹＆＃39;我希望在我的网站中实施效果here：http://codepen.io/dodozhang21/pen/siKtp

我尝试按原样复制它，由于某种原因，我的网络浏览器（chrome，firefox和IE）没有读取它。我尝试过使用-webkits，但它也没有用。我认为有一件特别的事情我错过了，这给我带来了所有麻烦。这是我的代码，请帮我找一个解决方案！

    @keyframes(bounce) {
    0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
  }
    40% {
    @include transform(translateY(-30px));
  }
    60% {
    @include transform(translateY(-15px));
  }
}

.bounce{
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;

    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 2s;

}

Answer 1

您需要添加

 @-webkit-keyframes(bounce) {0%, 20%, 50%,80%, 100% {
        @-webkit-include transform(translateY(0));   
}   
  40% {
        @-webkit-webkit-include transform(translateY(-30px));  
 }  
  60% {
        @-webkit-include transform(translateY(-15px));   } }

for Mozilla

    @-moz-keyframes(bounce) {   0%, 20%, 50%, 80%, 100% {
        @-moz-include transform(translateY(0));  
 }  40% {
        @-moz-webkit-include transform(translateY(-30px));  
 }  60% {
        @-moz-include transform(translateY(-15px));   }
 }

为什么我的CSS关键帧动画不起作用？

1 个答案: