アニメーション

アニメーションには、複合属性として次のアニメーション属性が含まれます。

animation-name --------------------------------------アニメーション名を指定します
animation-duration ---------------------------------アニメーションが一度完了するまでの時間を規定します
animation-timing -function ------------------------アニメーションのモーションスピードカーブを指定します
animation-delay-- ----------- ------------------------アニメーションの遅延時間を指定する
animation-iteration -count--------------- ----------アニメーションの再生回数を指定します
animation-direction ----------- ----------------- --次のサイクルでアニメーションを逆方向に開始するかどうかを指定します
animation-fill-mode ---------- ------------------------ アニメーション時間外の状態を指定します
animation-play-state ---------- ----------------- アニメーションの実行と一時停止を指定します

animation-timing-function

はアニメーションのスピードカーブを指定します。デフォルトは「ease」です。一般的に使用されるモーションスピードカーブには次のタイプもあります:

linear: 線形遷移。
イーズイン: 低速から高速まで。
イーズアウト: 速いものから遅いものまで。
イーズインアウト: 低速から高速、そして再び低速へ。

ベジェ曲線を直接使用して走行速度曲線を指定することもできます。ベジェ曲線の 4 つの値は [0, 1] の範囲内にある必要があります。

animation-direction

次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。

reverse: 逆方向の動き
alternate: 最初に法線方向に動き、次に反対方向に、連続的に交互に動きます
alternate-reverse: 最初に逆方向に動き、次に法線方向に動きます、連続交互

animation-fill -mode

は、アニメーション時間外のオブジェクトの状態を指定します。一般的に使用される値は次のとおりです:

none: デフォルト値
forwards: オブジェクトの状態をアニメーションの終了時の状態に設定します
backwards: オブジェクトの状態をアニメーション終了時の状態に設定しますアニメーションの開始

円運動の軌跡

実装コードは以下の通りです:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>沿圆形轨迹运动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #trajectory {
            width: 300px;
            height: 300px;
            border: 4px solid #949494;
            border-radius: 50%;
            position: relative;
            left: calc(50% - 153px);
            top:calc(50% - 153px);
        }
        @keyframes moveX{
            0% {left: -22px;}
            100% {left: 282px;}
        }
        @keyframes moveY{
            0% {top: -22px;}
            100% {top: 282px;}
        }
        #move {
            width: 40px;
            height: 40px;
            font-size: 12px;
            background-color: #32c33a;
            border-radius: 50%;
            position: absolute;
            left:-22px;
            top:-22px;
            animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
        }
    </style></head><body>
    <p id="trajectory">
        <p id="move">Immortal brother</p>
    </p></body></html>

ログイン後にコピー

上記コードの注意点は以下の通りです: