CSSアニメーションを学ぶその2

こんにちは、basyouです。
前回の続きをやっていきます。

## 取り扱うこと

・animationプロパティについて

## animationプロパティ

animationプロパティではtransitionプロパティよりも自由な動きをつけることができます。
まずは各animationプロパティについて簡単にまとめたいと思います。

//アニメーション名 後述する@keyframesで設定した名前を当てはめる
 animation-name

//アニメーションの1サイクルの時間を指定
 animation-duration

//アニメーションの変化方法を指定
 animation-timing-function
 

//アニメーションの開始時間を指定 
 animation-delay
 

//アニメーションのループ回数を指定
 animation-iteration-count
 

//アニメーションの再生方向を指定
 animation-direction
 

//アニメーション再生中や再生後のスタイルを指定
 animation-fill-mode


//上記プロパティのショートハンド（ごちゃごちゃするので正直使いにくい）
 animation

### @keyframesについて
@keyframesはどのようなアニメーションにするか決める関数（？）です。
以下の様に記述します。 

html

<p></p>

scss

p {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  // ここからアニメーション
  animation-name: hoge;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
}

@keyframes hoge {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

実行結果はこちらからどうぞ

↑の@keyframesを日本語で補足をつけるとこんな感じです。

@keyframes hoge {
 0% {  // 0%（アニメーション開始地点）の処理
   transform: scale(0);  
 }

 100% { // 100%（アニメーション終了地点）の処理
   transform: scale(1);  
 }
}

// hogeの呼び出し
p {
 
 // 省略
 
 animation-name: hoge;  // ここで呼び出し
 animation-duration: 0.7s;  //  アニメーションの再生時間
 animation-iteration-count: infinite;  // 無限再生
}

駆け足ですが、以上がCSSアニメーションの基本のきの字になります。