Introduction aux propriétés de transition et d'animation de l'animation CSS3

Cet article vous présentera les attributs de transition et d'animation pour réaliser une animation CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

tradition possède un total de 4 propriétés :

• transition-propriété transition-propriété

• transition-duration Le temps nécessaire pour terminer l'animation, calculé en secondes ou millisecondes

• transition-timing-function spécifie la courbe de vitesse de changement d'animation

• Transition-délai S'il faut retarder

transition-property Propriété de transition

aucune : Aucune propriété ne sera obtenue Effet de transition

tous : Tous les attributs obtiendront l'effet de transition

propriété : largeur, hauteur...

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

La fonction de transition est pour spécifier le temps requis pour les changements d'état.

img{
    transition: 1s;
}

durée de transition en secondes ou millisecondes pour terminer la transition d'état

Vous pouvez également spécifier l'attribut de changement de la transition, tel que le changement de largeur ou de hauteur

img{
    transition: 1s height;
}

Vous pouvez également spécifier plusieurs attributs

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

vitesse de changement d'état de délai de transition.

Spécifiez le paramètre de retard, de sorte que la hauteur change d'abord, puis la largeur change :

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

Le vrai sens du retard est de spécifier l'ordre dans lequel l'animation se produit, de sorte que plusieurs transitions différentes peuvent se produire à différents moments pour former un effet d'animation

vitesse de changement d'état de la fonction de synchronisation de transition

La valeur par défaut est de ralentir progressivement easy

Les valeurs possibles sont

• linéaire : vitesse constante

• easy-in : accélération

• allègement : ralentissement

• fonction cube-bézier, mode vitesse personnalisé

(cubique : cube, bézier : Courbe de Bézier)

cubique-bézier (, , , ) plage de valeurs 0-1

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

Remarque : La transition doit connaître les valeurs spécifiques de l'état de départ et de l'état final pour calculer l'état intermédiaire. Mais la transition ne peut pas calculer l’état 0->auto, il n’y aura donc aucun effet d’animation. Des situations similaires incluent display: none->block et background:url(foo.jpg)->url(bar.jpg).

Il présente des inconvénients :

1. nécessite le déclenchement d'un événement, ce qui ne peut pas se produire directement lorsque la page Web est

2. . un événement ponctuel Oui, cela ne peut pas se produire de manière répétée à moins que vous ne le déclenchiez à plusieurs reprises

3. Seuls l'état de départ et l'état final peuvent être définis, et l'état intermédiaire ne peut pas être défini

4. Une règle de transition ne peut définir des modifications que sur un seul attribut

animation

CSS Animation a les attributs suivants :

• animation-name Le nom qui doit être lié à l'image clé du sélecteur

• animation-duration L'heure requis pour terminer l'animation, calculé en secondes ou millisecondes

• animation-timing-function précise la courbe de vitesse de l'animation

• animaton-delay Le temps de retard avant le début de l'animation

• animation-iteration-count Le nombre de fois que l'animation doit être jouée

• animation-direction Si le l'animation doit être jouée à l'envers à tour de rôle

• animation-fill L'attribut -mode spécifie si l'effet dynamique est visible après la lecture de l'animation

• animatoin-play-state précise si l'animation est en cours d'exécution ou en pause

itération-répétition

animation-name

animation-durée

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

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特效代码大全

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!