css アニメーション

cssだけでアニメーションを実行させるときの書き方。
アニメーションさせたいクラスとアニメーション実行させるためのkeyframesをかいていきます。

keyframeの設定

@keyframes animePC {
          0% {
            transform:scale(1.0);
          }
          50%{
            transform:scale(1.2);
          }
          100% {
            transform:scale(1.0);
          }
        }

keyframesのアニメーションを実行させるためにはクラスに以下を記入
//アニメーション名
animation-name: animePC;

-webkit-animation-name:animePC;

//アニメーション時間
animation-duration:20s;
animation-fill-mode: forwards;

//ループ

animation-iteration-count: infinite