働く女性の未経験エンジニア道♯7～CSS animationプロパティでアニメーション編～

こんにちは。
最近はSharePointでポータルサイトの作成やVBAでのツール作成など、少しずつエンジニアっぽい仕事が増えてきた、もふもふです。
広く浅くいろんなことに手を出し始めていますが、久しぶりにHTMLとCSSでのページ作りに挑戦してみました。
今回は、CSSを使って変化をつける、第3弾！
アニメーションについて学んでいきたいと思います。

前回の記事はこちらです！

■CSSでのアニメーション２種類の違い

まず、CSSでのアニメーションには、transitionプロパティとanimationプロパティがあります。
それぞれの違いは以下の通り。

・transition（トランジション）プロパティ
⇒疑似クラスと組み合わせ、トリガーをきっかけに動きをつけるプロパティ
　例/マウスオーバーをしたら文字が大きくなる、背景が赤から青に変わる…等
　Hoverでも指定した要素に対して変化は付けられますが、
　transitionプロパティを使用することで「変化の開始から終了までの時間」や
　「変化の仕方」「速度」等、より複雑な変化が付けられます。
　ただし、動きは1回のみでトリガーが外れれば初期値に戻る。

・animation（アニメーション）プロパティ
⇒ transitionのようなきっかけ（トリガー）無しで動きをつけるプロパティ
　例/TOP画面で画像をエンドレスに流し続ける…等
　こちらもtransitionプロパティと同様に変化について指定ができるが、
　「無限ループ」や「一時停止・再生」等より詳細に設定できるのが特徴的。

ちなみに、それぞれの用語を直訳すると、

transition＝遷移（移り変わること。移り変わり）
Animation＝一コマずつ静止画像を作り、それらを連続させた作り出した動画となります。

transitionプロパティはボタンを押すなど自分の操作がきっかけ（トリガー）で動きに変化を出せるので、ユーザ目線からみても遊び心があり楽しいページになると思います。
個人的には疑似要素の延長という印象で比較的覚えやすいプロパティと感じたので、今回はanimationプロパティの方を学びながら、様々なサイトでよく見かける画像が無限に流れるスライダーに挑戦します。

■animationと@keyframesの基礎について

いきなり余談ですが・・・
私は初めてanimationプロパティを使用した時、あまり深く考えずコピペ＆人が作ったものの見様見真似で完成さえてしまったため、知った気（できた気）になってしまい、ちゃんと理解するまでに時間がかかりました（＾＾；）

初心者あるあるですが、ネット検索ででてくる「〇〇が簡単につくれる！」というものは確かにとても便利だし手軽で助かるのですが・・・（＾＾；）
一方で本来の意味をちゃんと理解しないままでもある程度作れてしまうという落とし穴もあります。
そして、1度できてしまったことについてはそこまで真剣に突き詰めなくなる…そんな私の様な大雑把な性格の方は要注意です！
なので、これから始めて挑戦する方は動きや概要についてざっくりでも先に理解をしてから、ページを完成させることをお勧めします。

ということで、まずは簡単にアニメーションの基礎について説明していきます。
ざっくりとやる事は2つ
要素に対してアニメーション全体の設定（animation-〇〇）⇒②アニメーションの動きについて詳細設定（@keyframes）
こちらを順番に説明していきます。

アニメの全体の設定

名前や、全体で何秒のアニメーションか、再生方向や回数など、アニメーション全体の設定を行います。

要素A {
 animation-name: hoge ; /*--アニメーション名をつける--*/
 animation-duration: 10s;　/*--アニメーション開始から終了までの時間（秒またはミリ秒）--*/
 animation-delay: 2s;　/*--アニメーション開始時間（遅らせる時間。０＝すぐ開始）--*/
 animation-direction: reverse;/*-- 順再生、逆再生、交互など　--*/
 animation-iteration-count: infinite;　/*--実行回数やループ指定--*/
}

また、上記はanimationプロパティでショートハンドでまとめて指定することもできます。
その場合の記述は下記のようにまとまります。

要素A {
 animation: hoge 10s ease 2s reverse infinite;
}

順番は不同でいいがanimation-durationはanimation-delayより先に書かなければならないので注意！
より詳しく知りたい方は以下の記事がおすすめです！

Quiita | CSSのショートハンド @ankouh2
S.H.U | 【CSS】animation-directionの使い方・再生方向を指定する

アニメーションの動きの詳細指定

アニメーションの開始から終了するまでの動き（幅が広がる⇔狭まる、透明⇔不透明etc）について、途中経過の詳細設定ができます。。
動きの段階指定は0％（開始）～100％（終了）や、from～toなど。

@keyframes アニメーション名 {
 0% {width: 0;}　/*--←アニメーション開始時0％の時間では幅＝何も表示されていない--*/
 50% {width: 30px;}/*--←アニメーション全体時間の半分50％時点で、幅が画面の30pxまで広がる--*/
 100% {width: 100px;} /*--←アニメーション終了時100％で幅が100pxまで広がる--*/
}

上記で記載しているアニメーション全体時間とは、「animation-duration」で指定した時間のことを指します。（今回の例では要素Aで指定をしている10秒）
※①②どちらから先に記載をしても問題ありませんが、両方設定をしないとアニメーションは動作しません。
それぞれの関係を例で図にしてみるとこのような形になります。

大まかに基本を学んだので、次は少し応用してみましょう。

■animationプロパティでスライダーを作ろう！

途中段階での動きに色々と変化をつけられるanimationプロパティなので、今回は6枚の画像と文字が・・・

・右から左に流れる
・画像と文字が半透明⇒通常の濃さ⇒半透明と変わる
・大きさが小さい状態から大きくなり、また小さくなる

そんな3つの動きが一つにまとまったスライダーに挑戦してみました。

<body>
 <div class="anima">
  <img src="1.JPG" alt=""><!-- 1枚目の画像 -->
  <img src="3.JPG" alt=""><!-- 3枚目の画像 -->
  <p>右から左に流れます</p>
  <img src="4.JPG" alt=""><!-- 4枚目の画像 -->
  <img src="5.JPG" alt=""><!-- 5枚目の画像 -->
  <img src="6.JPG" alt=""><!-- 6枚目の画像 -->
 </div>
</body>

p{
 margin: 50px 30px;
}
img{
 margin: 0 10px;
}
.anima {
 display: flex;/*文字と画像を横並びにする*/
 animation-name: anima_test;/*アニメーションの名前を設定*/
 animation-duration:12s;/*全体で12秒かけて終わらせる*/
 animation-iteration-count:infinite;/*無限に繰り返す*/
}
@keyframes anima_test{
 0% {
  transform: translateX(100%);/*開始時点の画像は右画面外に隠す*/
  opacity: 0.2;/*色が薄い状態で始まる*/
  height: 50px;/*画像と文字が小さい状態で始まる*/
 }
 20%{
  opacity: 0.5;/*色が少し濃くなる*/
  height: 100px;/*画像と文字が少し大きくなる*/
 }
 40%{
  opacity: 1;/*画像と文字の濃さが通常になる*/
  height: 120px;/*画像と文字が通常の大きさになる*/
 }
 80%{
  opacity: 0.5;/*色が少し薄くなる*/
  height: 100px;/*画像と文字が少し小さくなる*/
 }
 100%{
  transform: translateX(-100%);/*終了時点の画像は左画面外に隠す*/
  opacity: 0.2;/*色が薄くなりながら終わる*/
  height: 50px;/*画像と文字が小さくなりながら終わる*/
 }
}

↓実際できたもののイメージががこちらです↓

このように大きさや色を変えながら変化をつけることができるanimationプロパティーを活用すれば、動きのあるページの作成の幅が広がります。

今回の「おさらい」

◆transitionプロパティはトリガーが必要、animationプロパティはトリガーは不要
◆トリガー＝きっかけ。アレルギー体質にはこの時期辛い花粉がトリガー（泣）
◆animationプロパティ：1つのアニメーション全体の時間などを設定。（例：放映時間）
◆@keyframes＝最初~●分までは出会いのシーン、●分~●分は戦うシーン、●分~最後は仲良く終わるシーン・・・という様に放映時間内のどのタイミングにどういう見せ方をするのかなどを設定。