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

【问题标题】：Why is my CSS keyframe animation not working?为什么我的 CSS 关键帧动画不起作用？
【发布时间】：2015-02-17 22:23:41
【问题描述】：

我发现了一个 CSS 'bounce' 效果 here，我想在我的网站中实现它：http://codepen.io/dodozhang21/pen/siKtp

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

http://jsfiddle.net/ho7gaywb/

    @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;

}

【问题讨论】：

@include 是 SASS 语法，而不是纯 CSS。你有等效的 CSS 吗？
哦，这就是为什么！不。但它来自我发布的网站。有没有办法在那里找到它？
Here 是其等效的 webkit 语法 :) 我没有从其他站点选择它，但它应该是相同的。
有效！谢谢@Harry
很高兴知道它有助于交配。我没有添加任何答案，如果您想删除问题也没关系:)

标签： html css css-animations

【解决方案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));   } }

对于 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));   }
 }

【讨论】：