css 3アニメーション@keyframesとanimate

@keyframesとanimate

@keyframesは、アニメーションのトラックまたは効果を変更するために使用されます(cssを使用して必要なアニメーションを作成します).
keyframesの説明:

名前を作成する必要があります.このアニメーションの名前は、後でアニメーションをバインドするときに

が必要です.

form開始時、0%

に等しい

toが終点に到達ときは、100%

に等しい.

@keyframes leftMove{
    from{
        margin-left:0px;
    }
    to{
        margin-left:200px;
    }
}
@keyframes bgColor{
    0%{
        background:red;
    }
    50%{
        background:#000;
    }
    100%{
        background:#ff0;
    }
}

animateアニメーションをセレクタにバインドする場合に必要です.そうしないとアニメーションは生成されません.
animateプロパティの説明:animation:name duration timing-function delay iteration-count direction;

animation-name:バインドするkeyframesアニメーション名

animateion-duration:アニメーションを完了するのに要する時間を秒またはミリ秒で計算する

animateion-timing-function:アニメーションの速度曲線

linear:アニメーションの速度を最初から最後まで同じ

に維持

ease:デフォルト.アニメーションが遅くなってから早く終わる前に

ease-in:アニメーションは低速で

開始

ease-out:アニメーションは低速で

を終了

ease-in-out:低速で

を開始および終了

cubic-bezier(n,n,n,n):自由設定、値0-1の間

animateion-delay:アニメーション開始前に時間が遅延したかどうか

animateion-iteration-count:アニメーション再生回数

n:定義回数

infinite:無制限再生

animation-direction:アニメーションを順番に逆再生するかどうか

normal:通常再生

alternate:

を逆再生

.animate{
  width:100px;
  height:100px;
  background:#aaa;
  animation: leftMove 4s cubic-bezier(0.3,0.5,0.8,1);
}

⚠️ セレクタでアニメーションをバインドする場合は、少なくともname(アニメーション名)とduration(アニメーション終了時間)を書きます.