Css Animation

参考サイト

基本の考え方

animation-name

@keyframes XXX {} で設定したアニメーションの名前を設定します。

animation-duration

アニメーションの時間を設定します。アニメーションがループする設定の場合は、設定した秒数が繰り返し再生されます。
設定時は「1s」のように単位の「s（秒）」または「ms（0.？秒）」が必要です。

animation-timing-function

アニメーションが変化する速度

ease=>最初ゆっくり終わりゆっくり
linear=>一定の速度で
ease-in=>最初ゆっくり
ease-out=>終わりゆっくり
ease-in-out=>最初ゆっくり終わりゆっくり

animation-delay

アニメーションが開始するタイミングを設定します。
正数(+)を設定すると遅らせることができます。
負数(-)を設定した場合は、設定した秒数の分だけ進んだ状態でアニメーションが開始されます。
設定時は「0.5s」のように単位の「s（秒）」または「ms（0.？秒）」
初期値は0で、0sの場合は単に「0」とし、単位は必要ありません。

animation-iteration-count

アニメーションを何回繰り返すか設定します。
0以上の正数を設定でき、負数は無効となります。
「0.5」や「1.2」のような小数のある値を設定することも可能です。
infiniteを設定すると、アニメーションは無限に繰り返されます。

animation-direction

アニメーションの向きを設定します。

normal=>通常の向き
reverse=>逆向き
alternate=>正逆交互
alternate-reverse=>逆正交互

animation-play-state

アニメーションの再生状態を設定します。

running=>再生
paused=>停止

animation-fill-mode

要素のアニメーションの前後のスタイルを決められます

none=>アニメーションの前後でスタイルを変更しない
forwards=>アニメーションが終わった後のスタイルを保持
backwards=>アニメーションが始まる前のスタイルを保持
both=>アニメーションが始まる前と終わった後のスタイルを保持

アニメーションの書き方

      

        /* まとめて書いた場合 アニメーション名 アニメーション時間 イージング 遅延時間 繰り返し 逆再生 最後の状態を保持 */
        animation: animationName 1s ease 0.5s infinite alternate forwards;

        /* 分けて書いた場合 */
        animation-name: animationName;            /* アニメーション名 */
        animation-duration: 1s;                 /* アニメーション時間 */
        animation-timing-function: ease;       /* イージング */
        animation-delay: 0.5s;                /* 遅延時間 */
        animation-iteration-count: infinite; /* 繰り返し */
        animation-direction: alternate;     /* 逆再生 */
        animation-fill-mode: forwards;     /* 最後の状態を保持 */

実際に使用してみよう

フェードイン１０秒無限基本

        

          .animation-item {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 30px auto;
            padding: 0;
            /* 名前 */
            /* 時間 */
            /* 無限再生 */
            /* アニメーションが終わった後のスタイルを保持 */
            animation: fadeIn 10s infinite forwards;
          }

          /* アニメーションの変化の割合＋名前 */
          @keyframes fadeIn {     
            0% {
              /* 透明化 */
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }

フェードイン10秒無限ループ+ぺジェ曲

ぺジェ曲線は、使用しても使用しなくても余り変化わからない気がする

        

          .animation-item1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 30px auto;
            padding: 0;

            /* 名前 */
            /* 時間 */
            /*cubic-bezier(0.33, 1, 0.68, 1) は、CSS のアニメーションやトランジションの速度を制御するためのカスタムベジェ曲線を定義しています。
            このベジェ曲線は、アニメーションの進行速度を時間に対してどのように変化させるかを指定します。
             0.33 は、開始点の x 座標です。1 は、開始点の y 座標です。0.68 は、終了点の x 座標です。1 は、終了点の y 座標です。 */
            /* 無限再生 */
            /* アニメーションが終わった後のスタイルを保持 */
            animation: fadeIn 10s cubic-bezier(0.33, 1, 0.68, 1) infinite forwards;
          }

          /* アニメーションの変化の割合＋名前 */
          @keyframes fadeIn {    
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }

スライドイン(x180,右)(x-180,左)10秒間移動。再生されない場合は、ページリロード

        

          .animation-item2 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 30px auto;
            padding: 0;
            animation: slideIn 10s forwards;
          }
          
          @keyframes slideIn {
            0% {
              /* 180px 右に移動 */
              transform: translateX(180px);
              opacity: 0;
            }
            25% {
              transform: translateX(0);
            }
            50% {
              /* 180px 左に移動 */
              transform: translateX(-180px);
            }
            100% {
              transform: translateX(0);
            }
            40%,100% {
              opacity: 1;
            }
          }

ポよぽよ動く

        

          .animation-item3 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 30px auto;
            padding: 0;
            animation: poyon 10s ease-in-out infinite forwards;
          }

          @keyframes poyon {
            0%  {
              transform: scale(1.0, 1.0) translate(0, 0);
            }
            15% {
              transform: scale(0.98, 0.9) translate(0, 5px);
            }
            30% {
              transform: scale(1.02, 1.0) translate(0, 8px);
            }
            50% {transform: scale(0.98, 1.05) translate(0, -8px);
            }
            70% {
              transform: scale(1.0, 0.9) translate(0, 5px);
            }
            100% {
              transform: scale(1.0, 1.0) translate(0, 0);
            }
            0%, 100% {
              opacity: 1;
            }
          }