css アニメーション
- 公開日:
- 更新日:
- 文字数:531文字
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