我正在尝试创建一个向下滚动指示器。
我在我的元素中使用带有 scss 的 bourbon mixin 库(http://bourbon.io/)。
它确实按预期工作并且在 Firefox 和 IE 中有 flex 。但是,在所有其他浏览器 (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); } }
我非常感谢任何形式的帮助!
最佳答案
这是因为 Webkit 需要在您的 .bounce
类中的动画属性上添加前缀
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
关于css - 使用 bourbon 的关键帧在 webkit 浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27037868/