CSS animationを止める方法【一時停止か終了時点で止める】

CSS animationを使ったものの、止め方がわからない。

一時停止させたい！

最後の状態で止めたい！

そんな「CSS animationを止める方法」を説明します。

結論

一時停止の場合

animation-play-state: paused を使う。

アニメーション最後の状態で止める場合

animation-fill-mode:forwards を使う。

　

以下でデモをお見せします。

一時停止の場合

animationを一時停止するには上記CSSを使います。

↓マウスを乗せると一時停止します。

html

<div class="animationwrap"><div class="animation"></div></div>

CSS

.animationwrap{
    border: 1px solid #f2f2f2;
    height: 40px;
    position: relative;
    overflow: hidden;
}
.animation{
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 10px;
    animation: ugoki 3s linear infinite;
}
.animationwrap:hover .animation{
    animation-play-state: paused;/*コレが一時停止*/
}
@keyframes ugoki{
    0%{
       left: 0;
    }
    100%{
        left: calc(100% - 20px);
    }
}

アニメーション最後の状態で止める場合

animationを最後（100%）になったら止めるには上記CSSを使います。

↓マウスを乗せると動き出し、右端で止まります。

html

<div class="animationwrap"><div class="animation2"></div></div>

CSS

.animationwrap{
    border: 1px solid #f2f2f2;
    height: 40px;
    position: relative;
    overflow: hidden;
}
.animation2{
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 10px;
}
.animationwrap:hover .animation2{
    animation: ugoki 3s linear;
    animation-fill-mode:forwards;/*コレが最後停止*/
}
@keyframes ugoki{
    0%{
       left: 0;
    }
    100%{
        left: calc(100% - 20px);
    }
}

アニメーションが100%の状態を維持します。

注意点として、無限繰り返しである
animation-iteration-count:infinite を指定していると止まらないので気をつけましょう。

アニメーション停止の応用

アニメーションを一時停止できる特色を使って停止可能なCSSだけのスライドショーを作成しました。

まとめ

一時停止の場合

animation-play-state: paused を使う。

アニメーション最後の状態で止める場合

animation-fill-mode:forwards を使う。

以上、CSS animationを止める方法でした。