ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?
CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?
- 青灯夜游オリジナル
- 2021-12-10 13:38:412337ブラウズ
css3 アニメーションは「@keyframes」を使用してルールをカスタマイズします。 「@keyframes」はアニメーションルールを指定し、CSSアニメーションの一定期間の動作を定義することができます。構文は「@keyframesアニメーション名{keyframes-selector{css-styles;}}」です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。
@keyframes ルールは、属性値が時間の経過とともにどのように変化するかを記述する、カプセル化された CSS スタイル ルールのセットで構成されます。
@keyframes animation-name {keyframes-selector {css-styles;}}keyframes-selector: アニメーションの割合を 0% から 100% の間で定義します。アニメーションには多くのセレクターを含めることができます。
次に、さまざまな CSS アニメーション プロパティを使用して、アニメーションの反復回数、開始値と終了値を交互に切り替えるかどうか、アニメーションなど、アニメーションのさまざまな側面を制御できます。実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。
@キーフレーム ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に一連のスタイル ルール (カーリーで区切られたもの) で構成されます。ブレース） 。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。
構文:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}中括弧内で、アニメーション中の特定の時点でアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。
たとえば、単純なアニメーション @keyframe は次のようになります:
@keyframes change-bg-color {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100%{
background-color: red;
}
}
.demo{
-webkit-animation:change-bg-color 5s infinite;
animation: change-bg-color 5s infinite;
}
@keyframes change-bg-color {
from{
background-color: red;
}
50% {
background-color: blue;
}
to{
background-color: red;
}
}キーフレーム セレクターは、1 つ以上のカンマ区切りのパーセンテージ値、または from キーワードと to キーワードで構成されます。パーセント値にはパーセント単位指定子を使用する必要があることに注意してください。したがって、「0」は無効なキーフレーム セレクターです。 以下は、複数のカンマ区切りのパーセンテージ値やキーワード キーフレーム セレクター from および to を含むキーフレーム セレクターを使用したアニメーションの例です。 @keyframes bouncing {
0%, 50%, 100% { /* 或者 from, 50%, to */
top: 0;
}
25%, 75% {
top: 100px;
}
}上記の @keyframes ルール定義: 要素の上部オフセットは、アニメーションの開始時、途中、終了時にはゼロになり、アニメーションの最初の時点ではゼロになります。 -4 分の 1 と 4 分の 3 の距離。100px; これは、アニメーション ループ中に要素が数回上下に移動することを意味します。
css @keyframes アニメーション ルールの指定例:
<!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 アニメーションにはどのようなカスタム ルールが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。