プログラミング日記#08 CSSでアニメーションを再現

こんにちは！よっしーです。

今回はプログラミング学習8日目！いつものように学習を振り返ります。

今回の学習内容

・ドットインストール「CSS アニメーション編」全20回完了

今回はサイト模写ではなく、ドットインストールでCSSのアニメーションを勉強しました。

というのも、サイト模写にて画像をスライドショーで表示させる方法を知りたかったのです。
色々調べたところ、こりゃあアニメーションを学ばなあかんっぽいなと思いまして。

結局、ドットインストールの学習ではスライドショーで表示させる方法は学べなかったんですが…
まあとはいえ、アニメーションの基本は学べたと思うので、よしです。

学習の振り返り　要素を動作させるプロパティ

CSSで要素に動きをつけるときは、複数のプロパティを指定する必要があります。
方法としては、〔transition〕プロパティで指定する方法と〔@keyflames〕プロパティの2つの方法があります。
どちらも「要素に動きをつける」という意味では一緒なんですが、@keyflames だとより細かく設定ができて、常に動かすことも可能といった感じです。

それぞれの使用例を解説します。

transitionプロパティの場合

transitionは、アニメーション開始後の動作の方法（移動する、回転する、色が変わるetc...）を一括で指定できるプロパティです。

transitionプロパティは、始めから動きをつけたいときに使うのではなく、なんらかのイベントを起点として要素を動作させたいときに使用します。

たとえば、ボタンの要素にマウスカーソルを置いたとき、少しだけ色を変えたり、動かしたりといったことができます。

逆に、はじめからアニメーション動作をさせたいというときは、transitionプロパティは適していません。

その場合は@keyflamesを使用します。（説明は後述）

では次にtransitionプロパティのサブプロパティを見ていきます。

transition-property... 適用するアニメーションを指定する。（例 ：要素を移動させる(translate(　))、色を変化させる（background-color）)

transition-duration...アニメーション開始から終了までの時間を指定する

transition-delay...アニメーションを開始するまでの時間を指定

transition-timing-function...アニメーションの動かし方を指定する（例：始めと終わりだけゆっくり動かすならease、等速で動かすならlinear）
※各プロパティの動きを見たい方はコチラからどうぞ。

上記プロパティを一括で指定するtransitionの入力は順不同・省略可です。

なお、transition-duration、transition-delayを指定するときは、先に書いた時間がtransition-durationの指定とされます。つまり、どちらも指定する場合は、transition: 1s(duration) .5s (delay)などと書いてあげればOKですね。

@keyflamsの場合

@keyflamesを使ったアニメーションは、transitionと違って何かを起点として動作させる必要はありません。

例えば、常に動き続ける要素をつくることも可能です。さらに、アニメーション動作後の細かい設定もできます。

実際にコードに使い方を書いてみます。

box1 {
 animation-name-property: (名前)　　←keyflamesにつけた名前
 animation-duration: 1s;
 animation-fill-mode: forwards;  ←初期値に戻ってねという指定
 animation-iteration-count: infinie; ←永遠にアニメーションを繰り返す

@keyflames (名前)　{
 0%（初期値の設定） {
 transform:none;  ←最初は動かないでと指定した
 }　
 
 40％ (アニメーション開始後、40％の動作方法。今回は0.4秒)　{
 transform: translatex(100px);
 background: skyblue;
 }

 100%（アニメーション1秒の値）{
 transform: translatex(300px);  
 }
}

animationにおいても一括プロパティで指定が可能です。

まとめ

ちょっと長くなったので、終わります。

animationについては少し奥が深そうなので、1記事では話せないっぽい。また機会があったら書こうと思います。

t

それじゃ！