CSS3アニメーションを最後のフレームで停止する方法：3つのアプローチと詳細解説
CSS3アニメーションを最後のフレームで停止する方法
animation-fill-mode プロパティを使う
animation-fill-mode プロパティは、アニメーションが終了した後に要素に適用されるスタイルを制御します。このプロパティに forwards を指定すると、アニメーションが終了した後に最後のキーフレームのスタイルが保持されます。
.element {
animation: myAnimation 2s forwards;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
この例では、 .element 要素は 2秒かけて 100px 右に移動するアニメーションが適用されます。アニメーションが終了すると、要素は 100px 右に移動したまま保持されます。
animation-play-state プロパティと JavaScript を使う
animation-play-state プロパティは、アニメーションの再生状態を制御します。このプロパティを paused に設定すると、アニメーションが一時停止されます。
JavaScriptを使って、アニメーションの終了を検知し、animation-play-state プロパティを paused に設定することができます。
const element = document.querySelector('.element');
element.addEventListener('animationend', () => {
element.style.animationPlayState = 'paused';
});
この例では、 .element 要素の animationend イベントが発生したときに、animation-play-state プロパティを paused に設定しています。これにより、アニメーションが終了したときに最後のフレームで停止します。
animation-fill-modeプロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザをサポートする必要がある場合は、JavaScriptを使う方法の方が安全です。- アニメーションを最後のフレームで停止する以外にも、
animation-delayやanimation-iteration-countなどのプロパティを使って、アニメーションの動作を制御することができます。
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 2s forwards;
}
@keyframes myAnimation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 2s;
}
@keyframes myAnimation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div class="element"></div>
<script>
const element = document.querySelector('.element');
element.addEventListener('animationend', () => {
element.style.animationPlayState = 'paused';
});
</script>
</body>
</html>
このコードでは、 .element 要素に 2秒かけて 100px 下に移動するアニメーションが適用されます。アニメーションが終了すると、JavaScriptによって animation-play-state プロパティが paused に設定され、アニメーションが最後のフレームで停止します。
注意事項
- 上記のコードはあくまで例であり、状況に合わせて変更する必要があります。
animation-iteration-count プロパティは、アニメーションの繰り返し回数を指定します。このプロパティを 1 に設定すると、アニメーションが1回だけ再生され、最後のフレームで停止します。
.element {
animation: myAnimation 2s 1 forwards;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
animation-delay プロパティと animation-duration プロパティを使う
animation-delay プロパティは、アニメーションの開始までの時間を遅らせるために使用できます。animation-duration プロパティは、アニメーションの再生時間を指定します。これらのプロパティを組み合わせて使用することで、アニメーションが最後のフレームで停止するようにすることができます。
.element {
animation: myAnimation 2s ease-in-out forwards;
animation-delay: calc(2s - animation-duration);
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
この例では、 .element 要素は 2秒かけて 100px 右に移動するアニメーションが適用されます。しかし、animation-delay プロパティによって、アニメーションの開始が 2秒 遅らされるため、実際には 1秒 しか再生されません。 animation-duration プロパティと animation-delay プロパティを一致させることで、アニメーションが最後のフレームで停止するようにすることができます。
どの方法を使うべきか
どの方法を使うべきかは、状況によって異なります。
- シンプルでわかりやすい方法であれば、
animation-fill-modeプロパティを使うのがおすすめです。 - 古いブラウザをサポートする必要がある場合は、JavaScriptを使う方法がおすすめです。
- アニメーションを1回だけ再生したい場合は、
animation-iteration-countプロパティを使うのがおすすめです。 - アニメーションの開始時間を制御したい場合は、
animation-delayプロパティとanimation-durationプロパティを使うのがおすすめです。
css css-animations
