Question

我已经按照一个简短的教程来创建一个弹跳箭头但是我使用它的代码几乎完全相同，不包括小差异。

但是，当我将它添加到我的英雄单位时，它不会播放我的动画。

可能是我使用的transform或keyframe混合...

这是JSFiddle：http://jsfiddle.net/x9hxfusa/

Answer 1

放置keyframes＆amp;顶部的mixins声明。你必须在调用它们之前声明它们。

See Demo

Answer 2

我调整并简化了您的代码，我认为您可以根据自己的喜好安排动画本身更顺畅。请记住添加跨浏览器支持或至少使用SCSS来管理它：jsFiddle

CSS

fprintf(gnuplotPipe, "set title \"%s\"\n", title.c_str());

我也认为关键问题在于mixins，但是我为此找到了一个更简单的解决方案。

编辑：我最初尝试做以下操作，但我错过了刷新我的jsFiddle并错过了明显的解决方案，现在由@Oriol突出显示。无论如何，问题是你的关键帧＆amp; mixin代码位于动画代码之后（或者为了简单起见，位于CSS的顶部）。如果您希望保留代码，或者您可以尝试我的简化解决方案。

Answer 3

您必须声明

@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
  @content;
}
@-moz-keyframes $animation-name {
  @content;
}  
@-ms-keyframes $animation-name {
  @content;
}
@-o-keyframes $animation-name {
  @content;
}  
@keyframes $animation-name {
  @content;
}
}

@mixin animation($str) {
 -webkit-animation: #{$str};
 -moz-animation: #{$str};
 -ms-animation: #{$str};
 -o-animation: #{$str};
 animation: #{$str};      
}

在包含关键帧和变换之前

。您还必须以不同的方式设置反弹类（删除''）：

.bounce {
  @include animation(bounce 2s infinite);
}

http://jsfiddle.net/uth333cg/

为什么我的动画没有播放？

3 个答案: