CSS3セットアニメーション効果

アニメーションを作成するには、次の2つの手順があります。

最初にアニメーションを定義し、
キーフレームを使用してアニメーションを定義します

@keyframes 动画名称{
                0%{
                    width:100px;
                }
                100%{
                    width:200px;
                }
            }

0％はアニメーションの始まり、100％はアニメーションの完了です。もちろん、20％、50％などの複数のアニメーションプロセスを設定することもできます
。fromとtoは0％と100％に相当します。

アニメーションを再利用する

div{
        animation-name:动画名称;
        animation-duration:持续时间;
}

アニメーションのプロパティ：

属性	説明
アニメーションタイミング機能	アニメーションの速度曲線を指定します。デフォルトは「ease」です。
アニメーション-遅延	アニメーションの開始時刻を指定します。デフォルトは0です。
アニメーション-反復-カウント	アニメーションが再生される回数を指定します。デフォルトは1で、無限は無限ループです。
アニメーション方向	アニメーションの再生シーケンスを指定します。デフォルトは通常、逆再生は交互です
アニメーションフィルモード	アニメーション終了後の状態を指定し、前方に進み、後方に開始位置に戻ります。
アニメーション-再生状態	一時停止、実行は継続

@keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(1200px);//从位置0px移动到1200px
            }
        }
 @keyframes Move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);//先在X轴方向上移动1000px
            }
            50% {
                transform: translate(1000px, 500px);//再在Y轴方向上移动500px
            }
            75% {
                transform: translate(0, 500px);//再在X轴反方向上移动1000px
            }
            100% {
                transform: translate(0, 0);//回到起始位置
            }
        }
 .box1 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            animation-name: move;
            animation-duration: 5s;
        }
 .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: Move;
            animation-duration: 10s;
        }
<div class="box1"></div>
<div class="box2"></div>

CSS3セットアニメーション効果

CSS3セットアニメーション効果

おすすめ