css3 - アニメーション効果の実装-CSSチュートリアル-php.cn

css3 - アニメーション効果の実装

青灯夜游

リリース： 2018-09-12 18:05:07

オリジナル

2385 人が閲覧しました

この章では、単純な CSS3 アニメーションがどのように実装されるかを理解できるように、CSS3 アニメーション効果の実装について紹介します。困っている友人は参考にしていただければ幸いです。

css3-animation:

には次の属性があります:

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

コード例 (アニメーションのプロセス全体を説明するために、translation --translate を例として取り上げます):

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.warp {
				height: 100px;
				width: 100px;
				border: 1px solid #eee;
				background-color: #21B4BB;
				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% {
					background-color: #21B4BB;
					/*时间点可以任意，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% {
					background-color: #008000;
					/*时间点可以任意*/
					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% {
					background-color: #444444;
					/*时间点可以任意*/
					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% {
					background-color: #70DBDB;
					/*时间点可以任意*/
					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 */
				}
			}
		</style>
	</head>

	<body>
		<div class="warp">

		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

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