【CSS】「animation-direction」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「animation-direction」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「animation-direction」を使うと、「アニメーションが進む向き」の指定をすることができます。

また、下の動画でもCSSの「animation-direction」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「animation-direction」プロパティは「@keyframes」と一緒に使われる。

「animation-direction」プロパティは単体で使うのではなく「@keyframes」を使ったアニメーションの定義と一緒に使われます。

なのでもし「@keyframes」の使い方がいまいち分からないという方は下記の記事で詳しくまとめているので、こちらも一緒に読んでみてください！

「animation-direction」を使うと何ができるのか？

<div class="box n1"></div>
<div class="box n2"></div>
<div class="box n3"></div>

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.box {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
    background-color: skyblue;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

「animation-direction」を使うと、「アニメーションが進む向き」の指定をすることができます。

「@keyframes」の「0%」地点から「100%」地点へとアニメーションが進む感じにしたり、

逆に「100%」から「0%」へと逆方向にアニメーションさせることなんかもできますね。

ふむふむ。

「animation-direction」の使い方！

「animation-direction」の使い方をまとめていきます！

アニメーションを設定する要素自体に「animation-direction」の指定をする！

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.box {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
    background-color: skyblue;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

「animation-direction」の指定は、アニメーションをつける要素に対して行えばOKです！

上の例だと、「@keyframes」を使って「rotate」というアニメーションを定義して、そのアニメーションを「.box」というクラスがついた要素に「animation-name」プロパティを使って設定しています。

そしてその「.box」というクラスがついた要素に「animation-direction」プロパティを使って、「アニメーションの進行方向」の設定をしている、という感じになりますね。

「animation-direction」に設定できる値は？

「animation-direction」に設定できる値は下記の通りです。

• normal
• reverse
• alternate
• alternate-reverse

これらがありますね。

初期値は「normal」です。

下記のコードを使って解説します。

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 1000px;
    }
}
.box {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
    background-color: skyblue;
    animation-name: width;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

上のコードを使って、「animation-direction」の値だけ変更しながら、その挙動の解説を行います！

「normal」を使うと？

「animation-direction」に「normal」を使うと、「@keyframes」で作ったアニメーションは「0%」→「100%」の方向で進みます。

これを「順方向」と呼びます。

アニメーションが繰り返される際は、再び「0%」→「100%」の形で繰り返されます。

「reverse」を使うと？

「animation-direction」に「reverse」を使うと、「@keyframes」で作ったアニメーションは「100%」→「0%」の方向で進みます。

これを「逆方向」と呼びます。

アニメーションが繰り返される際は、再び「100%」→「0%」の形で繰り返されます。

「alternate」を使うと？

「animation-direction」に「reverse」を使うと、「@keyframes」で作ったアニメーションは、まず「0%」→「100%」の方向で進みます。「順方向」ですね。

そしてアニメーションが繰り返される際は、まず「100%」→「0%」の形で繰り返され、３回目のアニメーションは「0%」→「100%」というように「行ったり来たり」する形でアニメーションが繰り返されます。

「alternate-reverse」を使うと？

「animation-direction」に「reverse」を使うと、「@keyframes」で作ったアニメーションは、まず「100%」→「0%」の方向で進みます。「逆方向」ですね。

そしてアニメーションが繰り返される際は、まず「0%」→「100%」の形で繰り返され、３回目のアニメーションは「0%」→「100%」というように「行ったり来たり」する形でアニメーションが繰り返されます。

「カンマ区切り」で「複数の値」も書くことができる！

.box {
    animation-name: width, rotate;
    animation-direction: reverse, alternate;
}

このように「animation-direction」には「カンマ区切り」で「複数の値」を書くことができます。

その場合は、「animation-name」に書かれた順番に対応する形で「animation-direction」の値がそれぞれのアニメーションに対して別々に指定される感じになります。

この辺の挙動は下記の記事で詳しくまとめているので、もし気になる方は下記の記事を読んでみてください！

参考リンク！

仕様書。
https://drafts.csswg.org/css-animations/#animation-direction

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-direction

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「animation-direction」を使うと、「アニメーションが進む向き」の指定をすることができる。

「animation-direction」の指定は、アニメーションをつける要素に対して行えばOK！

「animation-direction」に設定できる値は下記の通り。

• normal
• reverse
• alternate
• alternate-reverse

「animation-direction」には「カンマ区切り」で「複数の値」を書くことも可能！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「animation-direction」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！