CSS3アニメーションプロパティの使い方-CSSチュートリアル-php.cn

CSS3アニメーションプロパティの使い方

青灯夜游

リリース： 2019-05-25 11:27:34

オリジナル

6967 人が閲覧しました

css3 アニメーションプロパティは、6 つのアニメーションプロパティを設定することでアニメーション効果を実現する短縮プロパティです。これら 6 つの属性は、アニメーション名、アニメーション時間、スピードカーブ、アニメーション遅延、再生時間、およびアニメーションが逆再生されるかどうかです。

CSS3アニメーションプロパティの使い方

#css3 アニメーションプロパティ

関数: アニメーションプロパティは次のとおりです。 6 つのアニメーションプロパティを設定するための短縮プロパティ。

構文:

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

ログイン後にコピー

説明: animation プロパティで設定できる 6 つのアニメーションプロパティは次のとおりです:

●アニメーション名: セレクターにバインドする必要があるキーフレーム名を指定します。

#● アニメーション期間: アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。

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

#● アニメーション遅延: アニメーションが開始するまでの遅延を指定します。

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

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

注: アニメーション期間属性は常に設定する必要があります。そうしないと、期間が 0 の場合、アニメーションは再生されません。

css3 アニメーションプロパティの使用例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>
</html>

ログイン後にコピー

レンダリング:

# # ＃以上がこの記事の全内容ですが、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。！！

以上がCSS3アニメーションプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。