使用波旁威士忌的关键帧在 Webkit 浏览器中不起作用

Question

我正在尝试创建一个向下滚动指示器.
我在我的项目中使用波旁威士忌混合库 （http://bourbon.io/） 和 scss。它确实按预期工作，并且在火狐和IE中具有弹性。但是，在所有其他浏览器（webkit）中，它不会。 为什么？

这是代码：
.HTML

<div class="arrow animated bounce"></div>

.CSS

/* Scroll down indicator (bouncing) */
@include keyframes(bounce) {
    0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
    }
    40% {
    @include transform(translateY(-30px));
    }
    60% {
    @include transform(translateY(-15px));
    }
}
.arrow {
    position: absolute;
    top: 94%;
    left: 0;
    width: 50px;
    height: 50px;
    background-image: url('/imgs/arrow.svg');
}
.bounce {
    animation: bounce 2s infinite;
}

输出的 CSS：

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

我非常感谢任何形式的帮助！

Answer 1

这是因为 Webkit 要求在 .bounce 类中的动画属性上添加前缀

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

JSfiddle 演示

Answer 2

或者

你可以只使用@include动画（弹跳 2s 无限）;

Answer 3

要按预期与波旁威士忌一起工作，您需要同时使用 animation() 和keyframes()，如下所示：

.myclass {
    @include keyframes(myAnimation) {
        from { background-position:  0px  0px;}
        to   { backgorund-position: 10px 10px; }
    }
    @include animation(myAnimation 10s linear infinite);
}

这将输出正确前缀的 CSS，并且在较新的浏览器中将按预期工作。