ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3アニメーションプロパティの詳しい解説（コード付き）

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

不言オリジナル: 2018-08-10 10:11:312283ブラウズ

この記事では、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 */
	}
}

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

関連記事