如果交替，如何捕獲css3動畫迭代

Question

我正在開發一個基於帶有關鍵幀的 css3 動畫的小應用程序。 我只對 Chrome 的行為感興趣。 我可以使用 jQuery 或 vanilla Javascript。

如果我在元素上設置動畫“infinite”和“alternate”屬性，則事件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) 使用事件中經過的時間並做一些數學計算。

請注意，在第一個替代方案中，保留了計時功能。

從標准

對於關鍵幀動畫，'animation-timing-function' 應用於關鍵幀之間，而不是整個動畫。 例如，在“漸入漸出”計時功能的情況下，動畫將在關鍵幀開始時緩入並在關鍵幀結束時緩出。 在關鍵幀塊中定義的“動畫計時函數”適用於該關鍵幀，否則使用為動畫指定的計時函數。

在下面的演示中，替代動畫移動紅色框。 一個獨立的、單一的動畫，在它周圍移動陰影。 注意動畫的第二部分需要有一個緩出（因為原來是反轉了

 .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>