Einführung in die Übergangs- und Animationseigenschaften der CSS3-Animation

Dieser Artikel stellt Ihnen die Übergangs- und Animationsattribute für die Realisierung von CSS3-Animationen vor. Ich hoffe, dass er für Freunde hilfreich ist.

Tradition hat insgesamt 4 Eigenschaften:

• Übergangseigenschaft Übergangseigenschaft

• Übergangsdauer Die zum Abschließen der Animation erforderliche Zeit, berechnet in Sekunden oder Millisekunden

• Übergangs-Timing-Funktion gibt die Kurve der Animationsänderungsgeschwindigkeit an

• Transition-delay Ob verzögert werden soll

transition-property Übergangseigenschaft

none: Es wird keine Eigenschaft erhalten. Übergangseffekt

alle: Alle Attribute erhalten den Übergangseffekt

Eigenschaften: Breite, Höhe...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}

Die Funktion des Übergangs besteht darin, anzugeben die Zeit, die für Zustandsänderungen benötigt wird.

img{
    transition: 1s;
}

Übergangsdauer in Sekunden oder Millisekunden, um den Zustandsübergang abzuschließen

Sie können auch das Änderungsattribut des Übergangs angeben, z. B. Breitenänderung oder Höhe

img{
    transition: 1s height;
}

Sie können auch mehrere Attribute angeben

img{
    transition: 1s height, 1s width
}

Übergangsverzögerungs-Zustandsänderungsgeschwindigkeit.

Geben Sie den Verzögerungsparameter an, sodass sich zuerst die Höhe und dann die Breite ändert:

img{
    transition: 1s height, 1s 1s width
}

Die eigentliche Bedeutung der Verzögerung besteht darin, die Reihenfolge anzugeben, in der die Animation auftritt. so dass mehrere verschiedene Übergänge zu unterschiedlichen Zeitpunkten auftreten können, um einen Animationseffekt zu erzeugen

Geschwindigkeit der Zustandsänderung der Übergangszeitfunktion

Standardmäßig wird die Geschwindigkeit schrittweise verlangsamt

Mögliche Werte sind

• linear: gleichmäßige Geschwindigkeit

• easy-in: Beschleunigung

• ease -out: Verzögerung

• Kubik-Bezier-Funktion, benutzerdefinierter Geschwindigkeitsmodus

(kubisch: kubisch, Bezier: Bezier-Er-Kurve)

kubischer Bezier (, , , ) Wertebereich 0-1

img{    
    transition-property: height;         
    transition-duration: 1s;    
    transition-delay: 1s;    
    transition-timing-function: ease;
}

Hinweis: Der Übergang erfordert eine klare Kenntnis der spezifischen Werte des Startzustands und des Endzustands, um den Zwischenzustand zu berechnen. Da der Übergang jedoch den Status 0->auto nicht berechnen kann, gibt es keinen Animationseffekt. Ähnliche Situationen umfassen display: none->block und background:url(foo.jpg)->url(bar.jpg).

Es hat Nachteile:

1. erfordert eine Ereignisauslösung, die nicht direkt beim Laden der Webseite erfolgen kann

2. ein einmaliges Ereignis Ja, es kann nicht wiederholt auftreten, es sei denn, Sie lösen es wiederholt aus

3. Nur ​​der Startzustand und der Endzustand können definiert werden, und der Zwischenzustand kann nicht definiert werden

4. Eine Übergangsregel kann nur Änderungen an einem Attribut definieren

Animation

CSS-Animation hat die folgenden Attribute:

• animation-name Der Name, der an den Selektor-Keyframe gebunden werden muss

• animation-duration Die Zeit erforderlich, um die Animation abzuschließen, berechnet in Sekunden oder Millisekunden

• animation-timing-function gibt die Geschwindigkeitskurve der Animation an

• animaton-delay Die Verzögerungszeit, bevor die Animation beginnt

• animation-iteration-count Die Häufigkeit, mit der die Animation abgespielt werden soll

• animation-direction Ob die Animation soll der Reihe nach rückwärts abgespielt werden

• animation-fill Das Attribut -mode gibt an, ob der dynamische Effekt sichtbar ist, nachdem die Animation abgespielt wurde

• animatoin-play-state gibt an, ob die Animation läuft oder pausiert

iteration-repeat

animation-name

Animationsdauer

首先 设置动画的名称和持续的时长

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视频教程！

相关推荐：

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

css3特效代码大全

Das obige ist der detaillierte Inhalt vonEinführung in die Übergangs- und Animationseigenschaften der CSS3-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!