cssのAnimationとKeyframesについてまとめています。
サマリ
- Animationを楽に、簡潔に記述するための方法としてKeyframesがある
- animationプロパティの第一引数にKeyframesを記述する
- animationプロパティの第二引数には、アニメーションが行われる間隔を記述でき、第三引数には、実行回数を記述できる
- ただしanimationに全てを記述するとわかりづらくなるので非推奨(一行に書く方法をショートハンドという)
- Keyframesには0〜100%でアニメーションの状態を定義する
.rect { display: inline-block; width: 100px; height: 100px; background-color: $cBlack; animation: sk-bouncedelay 1.4s ease infinite; // animation-timing-function: ease; ←実行タイミング // animation-delay: 3s; // animation-iteration-count: infinite; ←実行回数 // animation-direction: alternate-reverse; // animation-fill-mode: both; } @keyframes sk-bouncedelay { from { transform: scale(0); background-color: black; } to { transform: scale(1); background-color: green; } }