我正在尝试创建一个向下滚动指示器
我在我的项目中使用bourbon mixin库(http://bourbon.io/)和scss。
它确实在firefox和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); } }
我非常感谢任何帮助!
答案 0 :(得分:1)
这是因为Webkit在.bounce
类的动画属性中需要一个前缀
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
答案 1 :(得分:0)
或许你可以只使用@include动画(弹跳2s无限);
答案 2 :(得分:0)
对于按预期使用Bourbon的内容,您需要同时使用animation()
和keyframes()
:
.myclass {
@include keyframes(myAnimation) {
from { background-position: 0px 0px;}
to { backgorund-position: 10px 10px; }
}
@include animation(myAnimation 10s linear infinite);
}
这将输出正确的前缀CSS,并且在新的浏览器中将按预期工作。