Einführung in den Unterschied zwischen Übergang und Animation in CSS3

** Ich arbeite schon lange an einem Projekt. Die beiden CSS3-Attribute Übergang und Animation werden häufig in tatsächlichen Projekten verwendet. Wie folgt:

1: Führen Sie zunächst den Übergang ein:

a. Bei der Arbeit an Projekten stoßen wir oft auf solche Situationen, wie z. B. eine

-Taste , die sich ändert, wenn die Maus gedrückt wird hineingezogen. Schaltflächenhintergrundfarbe und Schriftfarbe, derzeit machen wir normalerweise Folgendes:

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 
.btn:hover{background:green;color:white;}

b Wir werden feststellen, dass sich die Hintergrund- und Schriftfarbe sofort ändert.

Zu diesem Zeitpunkt erscheint der Übergang, siehe Code:

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;transition：0.4s;}

c Nach dem Hinzufügen des Übergangs werden wir feststellen, dass die Hintergrundfarbe der Schaltfläche und die Schriftfarbe im Laufe der Zeit bis zum Ende einen allmählichen Prozess aufweisen.

Woher kommt diese Allmählichkeit?

Wenn wir über 0,4 Sekunden sprechen, muss ich nicht näher darauf eingehen Einzelheiten finden Sie hier. Ich habe sie alle auf dem Blog geschrieben, da Sie die Informationen selbst überprüfen können.

(1: Die oben genannten 0,4 Sekunden sind die Abkürzung für eines der Attribute des Übergangs: Übergangsdauer

Übergangsdauer stellt, wie der Name schon sagt, die Dauer des

dar Animation, das sind die oben genannten 0,4 Sekunden. Die Animation der Hintergrundfarbe und der Schriftfarbe ist in 0,4 Sekunden abgeschlossen (2: Wenn es um die kontinuierliche Animation in 0,4 Sekunden geht, müssen wir über die Geschwindigkeit der Objektbewegung sprechen. Wisse, dass ein Ding die folgenden Bewegungsarten hat:

　 (a linear: gleichmäßig

　 (beschleunigen: beschleunigen

) (beschleunigen: verlangsamen

　 (d kubisch-bezier

Funktion

: Benutzerdefinierter Geschwindigkeitsmodus (fast nicht verwendet)

Im obigen Code wird einfach der Übergang einfach geschrieben: 0,4 s; Warum hat es eine Bewegung?

(3: Es ist so, der Übergang hat ein Attribut namens Übergangszeitfunktion, die Standardeinstellung ist Leichtigkeit und seine Bewegung wird allmählich verlangsamt.

wird nicht als Übergang abgekürzt: 0,4s Leichtigkeit

d Wir sehen, dass alle durch CSS beschriebenen Änderungen im Hover-Stil durch Übergang beschrieben werden 🎜>

Meine Erklärung dieses Satzes ist etwas kompliziert. Erklären wir es direkt mit dem Code:

1) Wenn wir nur möchten, dass sich die Hintergrundfarbe über einen bestimmten Zeitraum ändert, tun wir Was ist zu tun?

2) Wir haben den Hintergrund im obigen Code gesehen, ja, weil er das angibt Nur die Hintergrundfarbe der Animation hat diesen Zeitraum.

transition: 0.4s background ease-in

Es handelt sich um die Abkürzung einer der Eigenschaften des Übergangs, die wie der Name schon sagt, spezifiziert >e, wir werden in tatsächlichen Projekten feststellen, dass wir manchmal eine Animation benötigen, um eine verzögerte Anzeige zu haben, und nicht möchten, dass sie sofort eine Animation generiert

Zu diesem Zeitpunkt ist ein weiteres Attribut des Übergangs Komm heraus, Übergang- Verzögerung

siehe Code:

Wir werden feststellen, dass diese Schaltfläche Die Hintergrundschriftanimation beginnt nach 1 Zweitens.

----》 Obwohl der Übergang einfach und benutzerfreundlich ist, werden wir feststellen, dass er verschiedenen Einschränkungen unterliegt.

transition: 0.4s 1s;

1: Für den Übergang ist ein

Ereignis
erforderlich, z. B. ein Hover. Daher kann er beim Laden der Webseite nicht automatisch erfolgen.

2: Der Übergang erfolgt einmalig und kann nicht wiederholt auftreten, es sei denn, es wird wiederholt ausgelöst.

3: Der Übergang kann nur den Start-

Zustand

und den Endzustand definieren, aber nicht den Zwischenzustand, was bedeutet, dass es nur zwei Zustände gibt.

4: Eine Übergangsregel kann nur Änderungen an einem Attribut definieren und nicht mehrere Attribute umfassen.

(Um es klar auszudrücken: Die oben genannten 4 Einschränkungen basieren auf der Einleitung, die ich aus Ruan Yifengs Blog zitiert habe)

Um durchzubrechen Aufgrund dieser Einschränkungen kam die Animation heraus.

2: Animation:

a) Lassen Sie uns zunächst nicht die verschiedenen Attribute der Animation im Detail erklären, sondern gehen wir direkt zum angezeigten Code

Der obige Code erzeugt diesen Effekt, siehe Screenshot:

b），当鼠标移入p的时候，p会发生一系列的样式改变（截图无法表现过程），在2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画，是因为什么呢？

 

 c），我准备作这样的解释，此时，你需要做一个animation动画只需要3点

 1. 需要一个承载动画的元素，如p

 2. 当前的元素写一个animation的css，其中定义你所需要这个动画产生的效果。（你暂时不需要知道如何编写这个动画内部的css）

 3. 编写一个动画进程，以@keyframes关键字来定义，而这个动画的进程有一个名字，如change，

　　----------》你可以把这个进程理解成一个函数，@keyframes对应的就是function，而change对应的就是函数名字-----------》最终等待被调用。

 

 好了，明白了以上三点，我们就可以来剖析animation的庐山真面目了。

 a）我们接着再来看这段代码：

animation: 2s change infinite;
　　　　

@keyframes change {
       0% { background: orange; }
       50% { background: pink;width: 200px; }
       100% { background: red;height: 300px; }
}

 

1. 我们先来看这个“所谓的函数change”

　　　　(1):这个change是animation其中的一个属性，叫做动画名字-----》 animation-name:change;

2. 我们再来看这个“百分比”

　　　  (1):这个百分比你只要理解它是这个这个动画在多少时间内完成的一系列样式改变的进度。这个进度你可以描绘这个元素你想改变的的样式属性（可以定义多种）

　　　  (2):当然也可以这样写：

@keyframes change {
            from { background: orange; }
            50% { background: pink;width: 200px; }
            to { background: red;height: 300px; }
}

 

 3.看完了动画制作的过程，现在我们来看如何调用这个动画：见代码：

.c:hover{animation: 2s change infinite;}

 （1），机智的你肯定看到了2s，是的没错，就是它让动画2秒完成。和transition一样，它是animation的一个属性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：animation-duration: 2s;

 （2），机智的你肯定看到了change,是的没错，就是如此调用这个“动画函数”的.只需要在当前元素animation的css样式里写入就可以了。

 

  （3），刚刚前面我们说了，这段代码会在鼠标移入p元素后2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画

　　　　 *：注意看到无限制三个字，

　　　　 *：无限制怎么来的呢？此时这段代码只剩下infinite了。

　　　　  *：不用想，他也是animation其中之一属性：叫做 animation-iteration-count: infinite;

　　　　  *：这个属性是用来定义这个动画应该播放多少次，infinite代表的无限制（无数次），当然你也可以在让它播放一个定值的数次，比如3次

animation-iteration-count: 3;

 在这里，你只需要在animation里的css里写入次数就可以了：

.c:hover{animation: 2s change 3;}

 

 

 4：这个动画虽然已经介绍完了，但是我们会发现动画在两秒钟后又会恢复原样（初始状态）：

此时我们想让动画两秒执行完毕之后保持在结束状态，这该怎么办了，此时animation的另一个属性就派上用场了

                                                                        -------------》animation-fill-mode:forwards;

在这里，你只需要在animation里的css里写入forwards就可以了：

.c:hover{animation: 2s change 3 forwards;}

2秒动画结束后就会是这样：

 

 

 

 5：同样的，animation也和transition一样具备延时动画的属性：

　　　　　　　　　　　　　　　　　　　　------------》animation-delay: 1s;

同样的animation简写写法如下,代表鼠标移入p内，1秒后动画开始

.c:hover{animation: 2s 1s change 3 forwards;}

 

6：同样的，animation也和transition一样具备动画以何种速度呈现的属性：默认是ease，它运动的形式是逐渐放慢的。

　　　　　　　　　　　　　　　　------------------》animation-timing-function: ease;

　　　　

　　　  （a  linear：匀速

　　　  （b  ease-in：加速

　　　  （c  ease-out：减速

　　  　（d  cubic-bezier函数：自定义速度模式（几乎不用）

 

****要改变运动形势只要添加相应的速度代表参数了，见代码：

.c:hover{animation: 2s 1s change 3 forwards linear;}

 

7:animation还有一个属性我就不打算细写了，--------》animation-direction，默认情况下是normal，

　　它是用来改变动画播放不仅只可以从结束状态跳回到起始状态这种形式。

 

8：上面说过，animation浏览器一加载便可以自动触发：

.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; animation: 2s change forwards;}

** 此时你会发现，浏览器一运行这个p就开始动画了。至于什么时候触发，那就要看项目具体需求了。

 

结语：自此，css3中的两大动画transition和animation就介绍完了。如有错误，欢迎指正。

 

Das obige ist der detaillierte Inhalt vonEinführung in den Unterschied zwischen Übergang und Animation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!