CSSでのアニメーションとは何ですか

CSS のアニメーションは省略属性であり、[animation-duration] などのアニメーション属性を設定するために使用され、アニメーションが完了するまでにかかる時間を指定します。この属性を指定する必要があります。指定しない場合、アニメーションの継続時間は0になると再生できなくなります。

このチュートリアルの動作環境: Windows 10 システム、CSS3、この記事はすべてのブランドのコンピューターに適用されます。

animation 属性は、6 つのアニメーション属性を設定するために使用される省略された属性です:

(学習ビデオの推奨: css ビデオ チュートリアル)

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

コメント : お願いします常にアニメーション期間属性を指定します。指定しない場合、期間は 0 になり、アニメーションは再生されません。

構文:

animation: name duration timing-function delay iteration-count direction;

animation-name は、セレクターにバインドする必要があるキーフレーム名を指定します。 。

animation-duration アニメーションの完了にかかる時間を秒またはミリ秒で指定します。

animation-timing-function アニメーションのスピードカーブを指定します。

animation-delay アニメーションが開始されるまでの遅延を指定します。

animation-iteration-count アニメーションを再生する回数を指定します。

animation-direction アニメーションを逆方向に順番に再生するかどうかを指定します。

例:

省略属性を使用してアニメーションを div 要素にバインドする:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

関連する推奨事項:CSS チュートリアル

以上がCSSでのアニメーションとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。