CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)

animation-name アニメーション名。複数のアニメーションがバインドされていることを示すために、カンマで区切られた複数の値を持つことができます。

animation-name プロパティは、アニメーションに名前を割り当てます。

animation-name は主流のブラウザと互換性がありますが、互換性のためにプレフィックスを付ける必要がある

animation-name には、keyframename と none という 2 つのプロパティ値があります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    体{
        マージン:0 自動;    
        背景:#abcdef;    
    }
    div{    
        幅:800ピクセル;
        高さ:800px;
        マージン:0 自動;    
    }
    。容器{
        位置: 相対的;
    }
    .inner、.middle、.outer、.pic{
        位置: 絶対;
        トップ:0;
        右:0;
        下:0;
        左:0;
        マージン:自動;        
    }
    .インナー{
        背景:url(source/circle_inner.jpg) 中央 繰り返しなし;
        アニメーション名:circle_inner;
    }
    。真ん中{
        背景:url(source/circle_middle.jpg) 中央 繰り返しなし;
        アニメーション名:circle_middle;
    }
    .外側{
        背景:url(source/circle_outer.jpg) 中央 繰り返しなし;
        アニメーション名:circle_outer;
    }
    .pic{
        背景:url(source/pic.jpg) 中央 繰り返しなし;
    }
</スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</本文>
</html>

アニメーション期間のアニメーション期間はデフォルトで0です

アニメーションタイミング関数アニメーションタイミング関数

アニメーション遅延アニメーション遅延時間

animation-delay プロパティは、アニメーションがいつ開始するかを定義します。単位は秒 (s) またはミリ秒 (ms) です。負の値も使用できます。-2s を指定すると、アニメーションはすぐに開始されますが、2 秒スキップされます。

animation-iteration-count アニメーションループ回数

アニメーションの反復回数: 数値 | 無限デフォルトは 1

アニメーション方向: 通常 | 逆 | 交互 | 交互逆

alternate と alternate-reverse は、animation-iteration-count が infinite に設定されていない場合は、1 回だけ実行されて停止します。

animation-fill-mode アニメーションの遅延は実行されない、またはアニメーションが完了した後に一時停止状態になります (アニメーションをループに設定することはできません。そうしないと停止できません)

animation-fill-mode: none | forwards | backwards | both 終了状態なし開始状態は状況によって異なります

アニメーション再生状態: 実行中 | 一時停止アニメーション再生状態: 実行中 | 一時停止

アニメーションの省略形

アニメーション: 名前期間タイミング関数遅延反復回数方向塗りつぶしモード再生状態

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    体{
        マージン:0 自動;    
        背景:#abcdef;    
    }
    div{    
        幅:800ピクセル;
        高さ:800px;
        マージン:0 自動;    
    }
    。容器{
        位置: 相対的;
        -webkit-transform-style:3d を保存します。
           -moz-transform-style:3d を保存します。
            -ms-transform-style:3d を保持します。
             -o-変換スタイル:3d を保持します。
                変換スタイル:3D を保持します。
    }
    .inner、.middle、.outer、.pic{
        位置: 絶対;
        トップ:0;
        右:0;
        下:0;
        左:0;
        マージン:自動;        
    }
    .container:hover div{
        -webkit-アニメーションの再生状態:一時停止;
           -moz-アニメーションの再生状態:一時停止;
            -ms-アニメーションの再生状態:一時停止;
             -o-アニメーションの再生状態:一時停止;
                アニメーションの再生状態:一時停止;
    }
    .インナー{
        背景:url(source/circle_inner.jpg) 中央 繰り返しなし;    
        /*サイクル*/
        -webkit-animation:circle_inner 10 秒の easy-in-out 1 秒の無限交互実行;
           -moz-animation:circle_inner 10 秒の easy-in-out 1 秒の無限交互実行;
            -ms-animation:circle_inner 10 秒のイーズインアウト、1 秒の無限交互実行。
             -o-animation:circle_inner 10 秒の easy-in-out 1 秒の無限交互実行;
                アニメーション:circle_inner 10s easy-in-out 1s infinite alternate running;    
        /*ループなし、塗りつぶし効果*/
        /*-webkit-animation:circle_inner 10s easy-in-out 1s forwards running;
           -moz-animation:circle_inner 10 秒、ease-in-out 1 秒、前方に走ります。
            -ms-animation:circle_inner 10 秒、ease-in-out 1 秒、前方に走ります。
             -o-animation:circle_inner 10 秒、ease-in-out 1 秒、前方に走ります。
                アニメーション:circle_inner 10s easy-in-out 1s forwards running;*/
    }
    。真ん中{
        背景:url(source/circle_middle.jpg) 中央 繰り返しなし;
        -webkit-animation:circle_middle 10 秒のイーズインアウト、1 秒の無限交互実行。
           -moz-animation:circle_middle 10 秒のイーズインアウト、1 秒の無限交互実行。
            -ms-animation:circle_middle 10 秒のイーズインアウト、1 秒の無限交互実行。
             -o-animation:circle_middle 10 秒のイーズインアウト、1 秒の無限交互実行。
                アニメーション:circle_middle 10s easy-in-out 1s infinite alternate running;    
    }
    .外側{
        背景:url(source/circle_outer.jpg) 中央 繰り返しなし;
        -webkit-animation:circle_outer 10 秒の easy-in-out 1 秒の無限交互実行;
           -moz-animation:circle_outer 10 秒の easy-in-out 1 秒の無限交互実行;
            -ms-animation:circle_outer 10 秒の easy-in-out 1 秒の無限交互実行;
             -o-animation:circle_outer 10 秒の easy-in-out 1 秒の無限交互実行;
                アニメーション:circle_outer 10 秒の easy-in-out 1 秒の無限交互実行;    
    }
    .pic{
        背景:url(source/pic.jpg) 中央 繰り返しなし;
    }
    @keyframes 円_内側{
        0%{ 変換:Xを0度回転します; }
        50%{ 変換:回転X(90度); }
        100%{ 変換:回転X(360度); }
    }
    @keyframes 円_middle{
        0%{ 変換:Y回転(0度); }
        50%{ 変換:Y回転(90度); }
        100%{ 変換:Y回転(360度); }
    }
    @keyframes 円_外側{
        0%{ 変換:Z回転(0度); }
        50%{ 変換:Zを90度回転します; }
        100%{ 変換:Z回転(360度); }
    }
</スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</本文>
</html>

アニメーションパフォーマンスの最適化:

background-attachmentの代わりにposition-fixedを使用する

画像を含む要素は疑似要素に配置される

変わる

IE13+との互換性は諦めてもいいような気がします…

下向き矢印効果

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    体{
        マージン:0 自動;    
        背景:#abcdef;    
    }
    div{    
        幅:30px;
        高さ:30px;
        位置: 固定;
        左:0;
        右:0;
        下:100px;
        マージン:0 自動;    
        カーソル:ポインタ;
        -webkit-transform:回転(90度);
           -moz-transform:回転(90度);
            -ms-transform:回転(90度);
             -o-transform:回転(90度);
                変換:回転(90度);
        -webkit-animation:upDown 2s easy-in-out 無限;
          -moz-animation:upDown 2s イーズインアウト 無限;
           -ms-animation:upDown 2s イーズインアウト 無限;
            -o-animation:upDown 2s イーズインアウト 無限;
               アニメーション:アップダウン 2秒 イーズインアウト 無限;
    }
    @-webkit-keyframes アップダウン{
        0%{ 下部:100px; }
        50%{ 下部:80px; }
        100%{ 下部:100px; }
    }
    @-moz-keyframes アップダウン{
        0%{ 下部:100px; }
        50%{ 下部:80px; }
        100%{ 下部:100px; }
    }
    @-ms-keyframes アップダウン{
        0%{ 下部:100px; }
        50%{ 下部:80px; }
        100%{ 下部:100px; }
    }
    @-o-keyframes アップダウン{
        0%{ 下部:100px; }
        50%{ 下部:80px; }
        100%{ 下部:100px; }
    }
    @keyframes アップダウン{
        0%{ 下部:100px; }
        50%{ 下部:80px; }
        100%{ 下部:100px; }
    }
</スタイル>
</head>
<本文>
    <div> </div>
</本文>
</html>