ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3アニメーションプロパティの使い方

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

青灯夜游オリジナル: 2019-01-31 10:24:206981ブラウズ

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

#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 サイトの他の関連記事を参照してください。

php css3 count function 选择器 animation

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：アウトラインオフセット属性の使い方次の記事：アウトラインオフセット属性の使い方

続きを見る