CSS3でアニメーションプロパティを使う方法

css3 のアニメーションには、アニメーション名、アニメーション完了までの時間、速度、遅延、再生速度、逆再生の有無の 6 つの属性があります。詳細 CSS3 のアニメーション属性メソッドについては、一定の参考値があるので、皆さんの参考になれば幸いです。

CSS は主に Web ページのスタイルとレイアウトを記述するために使用されます。CSS3 は最新の CSS 標準であり、CSS3 を使用すると、Web ページのコンテンツをより豊かにするためのアニメーションを作成できます。 CSS3 を共有します - アニメーションのアニメーション属性

使用中はブラウザの互換性の問題に注意してください

Internet Explorer 10、Firefox、Opera はアニメーション属性をサポートしています。

Safari と Chrome は -webkit-animation 属性をサポートしています

したがって、プログラムを作成する際にはブラウザの互換性の問題を考慮する必要があります

animation 属性

6 つのアニメーション プロパティを設定するために使用されます。

(1) アニメーション名: アニメーションの名前を指定します。

animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中
-webkit-animation-name:demo//Safari 和 Chrome

(2) anime-duration: アニメーションの完了にかかる時間 (秒およびミリ秒)

animation-duration：3s；
-webkit-animation-duration:3s;

(3) anime-timing-function: アニメーションの速度曲線

linear: 一定の速度で再生します

ease: アニメーションの速度は最初は遅く、その後速くなり、最後には遅くなります (デフォルト)

ease-in: を意味します。アニメーションが低速で開始します

ease-out: アニメーションが低速で終了することを指します。

ease-in-out: アニメーションは低速で開始および終了します。

cubic-bezier(n,n,n,n): cubic-bezier 関数に目的の値を設定します。 、はい 0 ～ 1 の値

animation-timing-function：ease；
-webkit-animation-timing-function:ease;

(4) anime-delay: アニメーション開始遅延時間

animation-delay：3s；
-webkit-animation-delay:3s;

(5) anime-iteration-count: アニメーションの再生回数

n: カスタムアニメーションの再生回数の値

infinite: アニメーションの無限ループ再生を指します

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

(6) anime-direction:アニメーションを順番に逆再生するかどうか

Normal アニメーションは通常通りに再生する必要があります (デフォルト)

alternate アニメーションは順番に逆再生する必要があります

animation-direction：normal;
-webkit-animation-direction:alternate;

小さな正方形を付けます右下と左上の方向に移動

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate; 
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
	0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
    0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
</style>

レンダリング:

##要約: 以上がこの記事の内容です。 CSS3 のアニメーションについては、この記事をご覧ください

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