Comparez les différences et les connexions entre transition et animation en CSS3

** Je travaille sur un projet depuis longtemps. Les deux propriétés CSS3 transition et animation sont souvent utilisées dans des projets réels. Comme suit :

1 : Introduisez d'abord la transition :

a Nous rencontrons souvent de telles situations dans les projets, comme un bouton Changement. la couleur d'arrière-plan du bouton et la couleur de la police lorsque la souris est déplacée. À ce moment-là, nous faisons habituellement ceci :

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

.btn:hover{background:green;color:white;}

b, nous constaterons que la couleur de l'arrière-plan et de la police change instantanément, est-ce que cela aura l'air particulièrement rigide

La transition apparaîtra à ce moment-là, voir le 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：.4s;}

c. Après avoir ajouté la transition, nous constaterons que la couleur d'arrière-plan du bouton et la couleur de la police ont un processus progressif jusqu'à la fin.

D'où vient cette progressivité ? Oui, c'est 0,4s, (en abrégé, c'est 0,4s.

Quand on parle de 0,4s, il faut parler des différents attributs de la transition . Je n'ai pas l'intention d'écrire tout cela en détail ici, car vous pouvez vérifier les informations vous-même

(1 : Le 0,4s ci-dessus est l'abréviation d'un des attributs de transition : transition-duration

transition-duration 顾名思义，表示动画持续的时间，也就是上面的0.4s了。在0.4秒的时间中完成背景颜色以及字体颜色的动画。

(2 : Lorsqu'il s'agit d'une animation continue en 0,4 seconde, il faut parler de la vitesse de l'objet mouvement. Nous savons qu'une chose a les types de mouvement suivants :

　 (a linéaire : vitesse uniforme

(b easy-in : accélération

　　(c faciliter la sortie : ralentir

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　〉 Transition : 0,4s ; Pourquoi a-t-il un mouvement

(3 : Cela ressemble à ceci. La transition a un attribut appelé ?

. La valeur par défaut est la facilité, qui est la forme de mouvement qui est progressivement ralentie

Non abrégé est <code class=" language-css">transition-timing-function. transition : facilité de 0,4 s

code>

<span class="token property">transition<span class="token punctuation">: 0.4s ease</span></span>

d,

On voit qu'après le survol du bouton, tout les changements décrits par css dans le style hover ont des animations décrites par

Mon explication de cette phrase est un peu alambiquée, passons directement à l'explication du code :

<.>1) Si vous souhaitez seulement que la couleur de fond ait une période de temps Comment devons-nous apporter des modifications

2) Nous voyons ? background dans le code ci-dessus, oui, c'est parce que c'est précisé Dans l'animation, seule la couleur de fond a l'animation de cette période

transition: 0.4s background ease-in

C'est l'abréviation d'un des attributs de transition, appelé :

transition-property ，顾名思义，指定属性。

e, nous trouverons dans les projets réels que parfois nous avons besoin d'une animation pour avoir une présentation différée, et non je veux qu'il génère une animation immédiatement

A ce moment, la transition Un autre attribut sort,

transition-delayVoir le code :

我们会发现，此时这个按钮的背景字体动画是在1秒钟之后才开始的。

 

----》   transition虽然简单好用，但是我们会发现它受到各种限制。

1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生

2:  transition是一次性的，不能重复发生，除非一再触发。

3： transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

4：一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

 

（为了表达清晰，上述4条限制是我引用阮一峰大神博客里的简介）

 

为了突破这些限制，animation出来了。

 

2：animation：

 a）,先不详细解释animation的各项属性了，直接来看代码吧

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

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

 

 上面的代码会产生这样的效果，见截图：

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

 

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

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

 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其中的一个属性，叫做动画名字-----》 <span class="token property"><span style="background-color: #ff6600">animation-name</span><span class="token punctuation">:change;</span></span>

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的一个属性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：<span class="token property">animation-duration<span class="token punctuation">: </span></span>2s;

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

 

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

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

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

　　　　  *：不用想，他也是animation其中之一属性：叫做 <span class="token property">animation-iteration-count<span class="token punctuation">: infinite;</span></span>

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

animation-iteration-count: 3;

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

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

 

 

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

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

                                                                        -------------》<span class="token property"><span style="background-color: #ff6600">animation-fill-mode</span><span class="token punctuation">:forwards<span class="token punctuation">;</span></span></span>

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

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

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

 

 看看两者区别：

Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。 如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。 Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有春秋。 Animation模块包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等属性。 其实说这么多，一句话就是：Transform和width、left一样，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。

 

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

　　　　　　　　　　　　　　　　　　　　------------》<span class="token property">animation-delay<span class="token punctuation">: 1s<span class="token punctuation">;</span></span></span>

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

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

 

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

　　　　　　　　　　　　　　　　------------------》<span class="token property">animation-timing-function<span class="token punctuation">: ease<span class="token punctuation">;</span></span></span>

　　　　

　　　  （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;}

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

 

结语：自此，css3中的两大动画transition和animation就介绍完了。如有错误，欢迎指正。如果此文对你有所帮助, 请不要吝啬你的赞哦~

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!