ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3 アニメーションに関連する 4 つのプロパティは何ですか?
CSS3 アニメーションに関連する 4 つのプロパティは何ですか?
- 青灯夜游オリジナル
- 2022-01-17 16:02:282202ブラウズ
css3 は、アニメーションに関連する 4 つの属性を設定します: 1. Transform 属性、要素に 2D または 3D 変換を適用するために使用されます; 2. Transition 属性、トランジション効果を実現するために使用されます; 3. アニメーション属性、要素にバインドを与えるために使用されます。アニメーション; 4. 「@keyframes」はアニメーションのサイクルの動作を定義します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
一般に、CSS3 アニメーションのプロパティは、transform、transition、アニメーションの 3 つだけです。
transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
transition このプロパティは、4 つの遷移プロパティを設定するための短縮プロパティです。
transition-property
transition-duration
- #transition-timing-function ##transition-lay
このプロパティは、6 つのアニメーション プロパティを設定するための短縮プロパティです: <strong></strong>
- animation-duration
- animation-timing-function
- animation-delivery
- animation-iteration-count
- animation-direction
## アニメーション属性は @keyframes ルールと一緒に使用する必要があります。アニメーションを作成します。
@keyframes
ルール<strong></strong>@keyframes ルールを使用すると、アニメーションを作成できます。 アニメーション作成の原則は、ある CSS スタイル セットを別のスタイル セットに徐々に変更することです。
この CSS スタイルのセットは、アニメーション プロセス中に複数回変更できます。
変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。
0% はアニメーションの開始時間、100% はアニメーションの終了時間です。
ブラウザのサポートを最適化するには、常に 0% および 100% セレクターを定義する必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/* Safari and Chrome */
}
@keyframes mymove {
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
@-webkit-keyframes mymove
/* Safari and Chrome */
{
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（学習ビデオ共有: css ビデオ チュートリアル 
）
以上がCSS3 アニメーションに関連する 4 つのプロパティは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。