ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーション アニメーション プロパティを使用してカルーセル効果を実現する方法の詳細な説明
CSS3 アニメーション アニメーション プロパティを使用してカルーセル効果を実現する方法の詳細な説明
- 巴扎黑オリジナル
- 2018-05-18 10:57:484339ブラウズ
CSS3のアニメーション属性を使用すると、Flashアニメーションと同じようにキーフレームを制御することでアニメーションの各ステップを制御し、より複雑なアニメーション効果を実現できます。この記事を通じて、CSS3 アニメーション アニメーション プロパティに基づくカルーセル効果を共有します。必要な友人はそれを参照してください
アニメーションの概要:
CSS3 のアニメーション プロパティを使用して作成できます。キー フレームを制御することで、Flash などのアニメーションを制御し、より複雑なアニメーション効果を実現します。アニメーションによって実現されるアニメーション効果は主に 2 つの部分で構成されます:
1) Flash アニメーションと同様のフレームを通じてアニメーションを宣言します。
2) アニメーション属性のキー フレームによって宣言されたアニメーションを呼び出します。
アニメーション属性値:
アニメーション属性は短縮属性です
構文: アニメーション: 名前、期間、タイミング、関数、遅延、反復回数、方向;
アニメーションによって設定される 6 つのアニメーション属性:
animation-name: セレクターにバインドする必要があるキーフレーム名を指定します。値:
none: (デフォルト) アニメーション効果を指定しません (カスケードからのアニメーションをオーバーライドするために使用できます)。
keyframename: セレクターにバインドする必要があるキーフレームの名前を指定します。
animation-duration: アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。値:
time: アニメーションが完了するまでにかかる時間を指定します。デフォルト値は 0 で、アニメーション効果がないことを意味します。
animation-timing-function: アニメーションのスピードカーブを指定します。値:
緩和: デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。
リニア: アニメーションの速度は最初から最後まで同じです。
イーズイン: アニメーションは低速で始まります。
イーズアウト: アニメーションは低速で終了します。
イーズインアウト: アニメーションは低速で開始および終了します。
cubic-bezier(n,n,n,n): cubic-bezier 関数で独自の値を定義します。取り得る値は0から1までの数値です。
animation-delay: アニメーションが開始するまでの遅延を指定します。値:
time: (オプション) アニメーションを開始するまでの待機時間を秒またはミリ秒で定義します。デフォルト値は 0 です。
animation-iteration-count: アニメーションを再生する回数を指定します。値:
n: アニメーションの再生回数を定義する値。
infinite: アニメーションを無限に再生することを指定します。
animation-direction: アニメーションを順番に逆方向に再生するかどうかを指定します。値:
normal: デフォルト値。アニメーションは正常に再生されるはずです。
代替: アニメーションは順番に逆方向に再生されます。
カルーセル画像を実装するためのアニメーション
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮换</title>
<style type="text/css">
p,img{
margin: 0;
padding: 0;
}
.p_first{
width: 1000px;
height: 300px;
margin-top: 100px;
margin-left: 250px;
overflow: hidden;
}
.p_second{
width: 4000px;
position: relative;
animation: myimg 12s linear infinite normal;
}
@keyframes myimg{
0{
left: 0;
}
5%{
left: 0;
}
30%{
left: -1000px;
}
35%{
left: -1000px;
}
60%{
left: -2000px;
}
65%{
left: -2000px;
}
95%{
left: -3000px;
}
100%{
left: -3000px;
}
}
</style>
</head>
<body>
<p class="p_first">
<p class="p_second">
<img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
</p>
</p>
</body>
</html>画像ラベルは同じ行に配置する必要があります。そうしないと、画像間に隙間ができてしまいます。
以上がCSS3 アニメーション アニメーション プロパティを使用してカルーセル効果を実現する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。