CSS3アニメーションプロパティの詳しい解説（コード付き）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3アニメーションプロパティの詳しい解説（コード付き）

不言

Aug 10, 2018 am 10:11 AM

この記事では、CSS3 のアニメーションプロパティについて詳しく説明します (コード付き)。必要な方は参考にしていただければ幸いです。

css3 アニメーション (アニメーション) には次の属性があります:

1. アニメーション名カスタムアニメーション名
2. アニメーション期間はアニメーションの完了にかかる秒数またはミリ秒数を指定します。デフォルト値は 0 です。アニメーションタイミング関数アニメーションのタイムカーブ。リニアは一定速度、イーズは最初は遅く、その後速くなり、最後まで遅くなります。
4.アニメーション遅延アニメーションが開始されるまでの遅延間隔、デフォルトは0です
5.animation-iteration-count アニメーションが再生される回数、デフォルトは1です
6.animation-directionアニメーションを再生するかどうか逆に順番に
7. anime-play-state アニメーションが実行中か一時停止中か。値: 「一時停止」は一時停止したアニメーションを指定します。「実行」は実行中のアニメーションを指定します (デフォルト)。

例: このデモでは、アニメーションのプロセス全体を説明するための例として翻訳を使用しています

html:

<body>
		<div class="warp">
			
		</div>
</body>

css:

.warp{
	    height: 100px;
	     width: 100px;
	     border: 1px solid #eee;
			
            animation-name:moves;
            animation-direction:alternate;
            animation-delay: 0.2s;
            animation-duration: 5s;
            animation-play-state: paused;
            animation-iteration-count: 3;
           /*以上可以简写成：*/
           animation: moves 5s linear 0.2s 3;
}

@keyframes moves{                           /*动画名称自定义*/
	10%{                                    /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
		transform: translate(100px,0);       
		-ms-transform:translate(100px,0);	 /*IE 9*/ 
		-moz-transform:translate(100px,0); 	/* Firefox */
		-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
		-o-transform:translate(100px,0); 	/* Opera */
	}
	30%{                                    /*时间点可以任意*/
		transform: translate(100px,100px);
		-ms-transform:translate(100px,100px);	 /*IE 9*/ 
		-moz-transform:translate(100px,100px); 	/* Firefox */
		-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
		-o-transform:translate(100px,100px); 	/* Opera */
	}
	60%{                                       /*时间点可以任意*/
		transform: translate(0,100px);
		-ms-transform:translate(0,100px);	 /*IE 9*/ 
		-moz-transform:translate(0,100px); 	/* Firefox */
		-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
		-o-transform:translate(0,100px); 	/* Opera */
	}
	100%{                                /*时间点可以任意*/
		transform: translate(0,0);
		-ms-transform:translate(0,0);	 /*IE 9*/ 
		-moz-transform:translate(0,0); 	/* Firefox */
		-webkit-transform:translate(0,0); /* Safari 和 Chrome */
		-o-transform:translate(0,0); 	/* Opera */
	}
}

関連推奨事項:

方法CSS コードを使用してテキスト表示を点滅させるだけですか? (コード例)

CSSとD3を使ってサイクロイドスイング効果アニメーションを実現する方法

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

声明

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