CSS3アニメーションを学ぶ（アニメーション）-CSSチュートリアル-php.cn

CSS3アニメーションを学ぶ（アニメーション）

高洛峰

リリース： 2016-10-09 16:12:56

オリジナル

1077 人が閲覧しました

CSS3 には、3D 効果、アニメーション、複数列など、多くの高度な機能があります。今日はCSS3を使ったアニメーションの書き方を記録する記事を書きます。

前もって醜いことを言わなければなりませんが、IE9 以下のバージョンは CSS3 アニメーションをサポートしていません (どうしても実装したい場合は、js の使用を検討できますが、効果はあまり良くありません)。 Chrome と Safafi では、古いバージョンとの上位互換性を確保するために、接頭辞 -webkit- を追加することをお勧めします。

今日はシンプルにアニメーションを作ります。

まず、単純に div を描画し、背景画像を追加します。

<body>
    <div class="demo">
        我是demo    </div></body>

ログイン後にコピー

rreee

右に示すように通常の DIV が表示されます: CSS3アニメーションを学ぶ（アニメーション）

それからそれを動かします

まず、この絵がどのように動くかを記述するメソッドを書きます

.demo{
    width: 120px;
    height: 120px;
    margin: 100px auto;
    background: url(img/demo.jpg) no-repeat;
}

ログイン後にコピー

この anime_run はこのメソッドの名前です。後で、名前を関連する要素に関連付ける必要があります。

from はアニメーションの開始状態を表し、to はアニメーションの終了状態を表します。

つまり、この方法は要素を時計回りに 360 度回転させるというもので、非常に簡単です。

from to では日々の開発ニーズを満たせない場合が多いので、このような書き方もあります

@keyframes run_animation{      
    from {
        transform: rotatez(0deg);
    }
    to {
        transform: rotatez(360deg);
    }
}

ログイン後にコピー

この記述により、アニメーションのアクションがより豊かでクールになります。各段階での要素のダイナミクスはパーセンテージで表されます。0% は上記のとおりであり、100% は上記のとおりです。実際、これはとても簡単ですよね~

アニメーションはとても書きやすいです。次に、アニメーションを画像にアタッチします。

@keyframes run_animation{
    0%{<br>　　　　 transform:rotatex(0deg);<br>　　 }
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }<br>　　100%{<br>　　　　 transform: rotatex(0deg);<br>　　}
}

ログイン後にコピー

このような簡単なコードで、定義したメソッドに従って画像を動かすことができます。

アニメーションが動かない場合は、次のいずれかの理由が考えられます:

1. アニメーション名が @keyframes で定義された名前と一致しません。2. アニメーションの再生時間が一致しません。定義されており、デフォルトは 0S、つまりアニメーションの再生なしです。上記のコード定義は 12S です。このコードは IE9 以下のブラウザで実行されます。IE9 以下は CSS3 アニメーションをサポートしていません。また、スタイルは各段階で同じです。メソッド定義。このように

.demo{
    width: 120px;
    height: 120px;
    margin: 100px auto;
    animation: run_animation 12s linear infinite; /*关联动画名称，定义动画时长，动画播放速度曲线，播放次数*/
    background: url(img/demo.jpg) no-repeat 100%;
}

ログイン後にコピー

さて、アニメーションが動くようになったはずです。次に、アニメーションのその他のオプションについて説明します。

1. アニメーションの反復回数: アニメーションの再生回数。再生する回数を書き留めます。ここで無限回使用したのは無限です

2.animation-timing-function:アニメーションスピードカーブ。この速度曲線は少し複雑で、ベッセル関数が関係しています。ベジェを詳しく調べたくない場合は、既製のリニア、イーズ、イーズイン、イーズアウト、イーズインアウトを使用してください。ベジェを知っている場合は、 cubic-bezier(n,n,n,n) を使用できます。これはより高度で、ふりの分野では強力なツールだと思います。

3.animation-delay: アニメーションを遅延させて再生でき、パラメーターも n S です。 anime-duration とは異なり、animation-duration はアニメーションの再生時間です。

上記の属性はすべて、上記の私の栗のように、アニメーションに短縮できます。

逆再生と一時停止のプロパティについては説明しません。必要に応じて、http://www.w3school.com.cn/css3/css3_animation.asp または

https://developer.mozilla にアクセスしてください。 .org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animation