如果交替，如何捕获 css3 动画迭代

Question

我正在开发一个基于 css3 带关键帧的动画的小型应用程序。我只对 Chrome 行为感兴趣。我可以使用 jQuery 或香草 Javascript.

如果我在元素上设置动画“无限”和“交替”属性，事件 animationiteration 在达到元素的初始状态之前被触发两次，因为迭代即使动画“反转”自身也会被计算在内。

要知道何时达到初始状态，我提出的唯一解决方案是使用变量跟踪迭代：

CSS 示例：

.animate{
    -webkit-animation: k-wide 0.6s ease-in infinite alternate;
    animation: k-wide 0.6s ease-in infinite alternate;
}
@-webkit-keyframes k-wide{
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}
@keyframes k-wide{
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

Javascript 示例：

var initialState = true;

elem = $('#myAnimatedElem')
    //event listener
    .on('webkitAnimationIteration animationiteration',function(){
        initialState = !initialState ;
        if (initialState) runMyCustomScript();
    })
    //start animation
    .addClass('animate');

问题是：有没有其他方法可以捕捉初始状态？有没有更有效的？我想知道我是否错过了一些事件处理程序。

Answer 1

据我所知，不，你不能。

备选方案：

1) 从动画中移除交替。使用更多关键帧使其交替

@-webkit-keyframes k-wide {
    from { transform: scale(1); }
    50% { transform: scale(1.2); }
    to { transform: scale(1); }
}

2) 使用从事件中流逝的时间并做一些数学运算。

请注意，在第一个备选方案中，计时功能被保留。

来自 standard

For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation. For example, in the case of an ‘ease-in-out’ timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. An ‘animation-timing-function’ defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.

在下面的演示中，替代动画移动了红色框。一个独立的单一动画，在它周围移动阴影。注意动画的第二部分需要有一个ease-out（因为原来是reversed

.base {
  width: 400px;
  height: 800px;
  border: solid 1px;
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 10px;
}

.move {
  position: absolute;
  width: 100%;
  height: 10px;
  border: solid 1px lightgreen;
  -webkit-animation: move 10s infinite linear;
  animation: move 10s infinite linear;
}

@-webkit-keyframes move {
  from {top: 0px;}
  to {top: 100%;}
}
@keyframes move {
  from {top: 0px;}
  to {top: 100%;}
}

.test1, .test2 {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0px;
  left: 100%;
}

.test1 {
  background-color: red;
  -webkit-animation: test1 5s infinite ease-in alternate;
  animation: test1 5s infinite ease-in alternate;
}

.test2 {
  box-shadow: 0px 0px 0px 5px blue;
  -webkit-animation: test2 10s infinite ease-in;
  animation: test2 10s infinite ease-in;
}

@-webkit-keyframes test1 {
  from {left: 0px;}
  to {left: 100%;}
}

@-webkit-keyframes test2 {
  from {left: 0px;}
  50% {left: 100%;  -webkit-animation-timing-function: ease-out;} 
  to {left: 0px;}
}

@keyframes test1 {
  from {left: 0px;}
  to {left: 100%;}
}

@keyframes test2 {
  from {left: 0px;}
  50% {left: 100%;  animation-timing-function: ease-out;} 
  to {left: 0px;}
}

<div class="base">
<div class="move">
<div class="test1"></div>
</div>
</div>
<div class="base" id="base2">
<div class="move">
<div class="test2"></div>
</div>
</div>

如果交替，如何捕获 css3 动画迭代

How to capture css3 animation iteration if alternate

html

javascript

keyframe

dom-events

css-animations