ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーションのトランジションとアニメーションプロパティの紹介

CSS3アニメーションのトランジションとアニメーションプロパティの紹介

青灯夜游転載: 2018-10-11 16:07:192993ブラウズ

この記事では、CSS3 アニメーションを実現するためのトランジションとアニメーション属性について説明します。必要な方は参考にしていただければ幸いです。

#tradition には合計 4 つのプロパティがあります:

##transition-property トランジションプロパティ
#transition-lay 遅延するかどうか

transition-property 遷移プロパティ

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: 均一速度

easy-in: 加速度
##ease -out: 減速
三次ベジェ関数、カスタム速度モード
(三次: 三次、ベジェ:
ベジェ Er 曲線)

3 次ベジェ (bc6fe54a88198feaad90e17e912675f1、22e181b6d31cf86e9ad22800df920dd0、be787f7ac9828fa514a83e4c791ae092、f4bf86c47d72eed593f57bb329a5f9f8) 値の範囲 0 ～ 1

img{    
    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 回限りのイベントです。はい、繰り返しトリガーしない限り、繰り返し発生することはありません
##開始状態と終了状態のみを定義でき、中間状態は定義できません
#アニメーション

CSS アニメーションには次の属性があります。

animation-name セレクターにバインドする必要がある名前 keyframe

animation-durationアニメーションの完了に必要な時間。秒またはミリ秒で計算されます。

animation-timing-function は、アニメーションの速度曲線を指定します。
animation-遅延アニメーションが開始されるまでの遅延時間
animation-iteration-count アニメーションを再生する回数
animation-direction かどうかアニメーションは順番に逆方向に再生される必要があります
#animation-fill -mode 属性は、アニメーションの再生後に動的効果が表示されるかどうかを指定します
# #animatoin-play-state は、アニメーションが実行中か一時停止中かを指定します
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アニメーションのトランジションとアニメーションプロパティの紹介

関連記事