CSSアニメーションのリスタート方法

CSSで要素をアニメーションするときに、いったんアニメーションを途中で止めて最初からアニメーションをリスタート（再スタート）する方法を述べます。

例）ボタンを押したときに、アニメーションを記述したCSSのclassを追加して要素をアニメーションするとき

[HTML]

<div id="animation"></div>
<button type="button" id="btn">ボタン</button>

[CSS]

#animation {
    width: 50px;
    height: 50px;
    background: #FFA500;
}

.run-animation {
    position: relative;
    -webkit-animation: slide-animation 1.5s ease;
    -ms-animation: slide-animation 1.5s ease;
    -o-animation: slide-animation 1.5s ease;
    -moz-animation: slide-animation 1.5s ease;
}

@-webkit-keyframes slide-animation {
    from {left: 0px;}
    to {left: 150px;}
}

@-ms-keyframes slide-animation {
    from {left: 0px;}
    to {left: 150px;}
}

@-o-keyframes slide-animation {
    from {left: 0px;}
    to {left: 150px;}
}

@-moz-keyframes slide-animation {
    from {left: 0px;}
    to {left: 150px;}
}

 [JavaScript]

$('#btn').on('click', function () {
    $('#animation').addClass('run-animation');
});

上記の場合、ボタンを2回以上押した2回目以降のアニメーションは、前のclassが残っているため、アニメーションができません。

そこで、アニメーションの終了を検知して、classを削除する方法が考えられますが、その方法の場合、現在のアニメーションが終了するまで、次のアニメーションを始めることができません。

そこで、下記のようにclassを追加する前にclassを削除する方法が考えられます。

$('#animation').removeClass('run-animation').addClass('run-animation');

しかし、これでもアニメーションができません。

そこで、次にいったん要素自体を削除して、改めて要素を追加する方法が考えられます。

これでアニメーションを再度初めからリスタートできます。下記サイトを参考にしてください。

Restart CSS Animation

ただこの方法は、プログラムが複雑な場合に組み込むのが厄介なときがあります。

そこで、下記のようにすると簡単にアニメーションのリスタートができます。

$('#btn').on('click', function () {
    $('#animation').removeClass('run-animation');
    $('#animation')[0].offsetWidth = $('#animation')[0].offsetWidth;
    $('#animation').addClass('run-animation');
});

以上がCSSアニメーションのリスタート方法となります。