【css】AnimationとKeyframesについて

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;
    }
}