Comment utiliser la propriété CSS animation-fill-mode-tutoriel CSS-php.cn

Comment utiliser la propriété CSS animation-fill-mode

(*-*)浩

Libérer： 2019-05-28 18:06:04

original

3169 Les gens l'ont consulté

L'attribut animation-fill-mode spécifie si l'effet d'animation est visible avant ou après la lecture de l'animation.

Comment utiliser la propriété CSS animation-fill-mode

Remarque : La valeur de l'attribut est un ou plusieurs mots-clés de motif de remplissage séparés par des virgules.

Syntaxe

animation-fill-mode : none | forwards | backwards | both;

Copier après la connexion

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

Valeur

Description

aucun

Ne modifie pas le comportement par défaut.

avant

Lorsque l'animation est terminée, conservez la dernière valeur de propriété (définie dans la dernière image clé).

en arrière

en animation -Delay applique la valeur de la propriété de démarrage (définie dans la première image clé) avant que l'animation ne soit affichée pendant une période de temps spécifiée par -delay.

les deux

avant et les modes de remplissage vers l'arrière sont appliqués.

ExempleSpécifie le mode de remplissage pour l'élément h1 :

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}

Copier après la connexion

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!