ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーションのトランジションとアニメーションプロパティの紹介
この記事では、CSS3 アニメーションを実現するためのトランジションとアニメーション属性について説明します。必要な方は参考にしていただければ幸いです。
#tradition には合計 4 つのプロパティがあります:
none: プロパティなしトランジション効果が得られます
all: すべての属性がトランジション効果を取得しますporperty: width, height...img{ height:15px; width:15px; } img:hover{ height: 450px; width: 450px; }トランジションの機能は時間を指定することです状態の変更に必要です。
img{ transition: 1s; }
transition-duration 状態遷移を完了するまでの秒数またはミリ秒数
幅の変更や高さなど、遷移の変更属性を指定することもできます
img{ transition: 1s height; }複数の属性も指定できます
img{ transition: 1s height, 1s width }
遷移遅延状態変化速度。
最初に高さが変更され、次に幅が変更されるように遅延パラメーターを指定します。
img{ transition: 1s height, 1s 1s width }遅延の本当の意味は、アニメーションが発生する順序を指定することです。アニメーション効果を形成するために、複数の異なるトランジションが異なる瞬間に発生する可能性があります。
トランジション タイミング関数の状態変更速度
デフォルトでは、イージングは徐々に遅くなります
可能な値は次のとおりです。 linear: 均一速度##ease -out: 減速
三次ベジェ関数、カスタム速度モード
(三次: 三次、ベジェ:
ベジェ Er 曲線)3 次ベジェ (bc6fe54a88198feaad90e17e912675f1、22e181b6d31cf86e9ad22800df920dd0、be787f7ac9828fa514a83e4c791ae092、f4bf86c47d72eed593f57bb329a5f9f8) 値の範囲 0 ~ 1img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
注:遷移では、中間状態を計算するために、開始状態と終了状態の特定の値を明確に知っている必要があります。ただし、トランジションでは 0->auto の状態を計算できないため、アニメーション効果はありません。同様の状況には、display: none->block、background:url(foo.jpg)->url(bar.jpg) などがあります。
これにはいくつかの欠点があります:
イベント トリガーが必要ですが、Web ページの読み込み時に直接発生させることはできません
は 1 回限りのイベントです。はい、繰り返しトリガーしない限り、繰り返し発生することはありません
animation-name セレクターにバインドする必要がある名前 keyframe
animation-durationアニメーションの完了に必要な時間。秒またはミリ秒で計算されます。animation-iteration-count アニメーションを再生する回数
#animation-fill -mode 属性は、アニメーションの再生後に動的効果が表示されるかどうかを指定します
iteration-repeat
animation-name
アニメーション期間
首先 设置动画的名称和持续的时长
p:hover{ animation: 1s rainbow; }
上面代码表示,当鼠标悬停在p元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。
@keyframs rainbow{ 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
keyframs的写法相当自由
可以用from表示0%,to 表示100%
@keyframs rainbow{ from { background: #c00; } 50% { background: orange; } to { background: yellowgreen; } }
如果忽略某个状态,浏览器会自动推算
@keyframs rainbow{ 50% { background: orange; } to { background: yellowgreen; } } @keyframs rainbow{ to { background: yellowgreen; } } @keyframs rainbow{ from, to { background: yellowgreen; } }
浏览器从一个状态到另外一个状态是平滑过渡到,steps函数实现分步过渡
p:hover { animation: 1s rainbow infinite steps(10); }
默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放。
p:hover{ animation: 1s rainbow infinite; }
除了infinite,还可以设置为具体的次数: 3、5
p:hover{ animation: 1s rainbow 5; }
animation-fill-mode
动画结束以后会立即冲结束状态回到起始状态,如果想让动画保持在结束状态就要加上animation-fill-mode属性中的forwards
p:hover{ animation: 1s rainbow infinite forwards; }
animation-fill-mode 有4种取值
none 不改变默认行为
forawads 动画完成后,保持最后一个属性(在最后一个关键帧中定义)
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前向后都进行填充
animation-direction
规定了轮流反向播放动画
alternate:动画会在奇数次(1,3,5...)正常播放,偶数次(2,4,6...)反向播放
最常用alternate和revers,浏览器对其他值的支持不佳
<iframe width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/"> </iframe>
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程!
相关推荐:
以上がCSS3アニメーションのトランジションとアニメーションプロパティの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。