Comment utiliser la règle CSS @keyframes-Questions et réponses frontales-php.cn

Comment utiliser la règle CSS @keyframes

青灯夜游

Libérer： 2019-05-30 16:27:12

original

3967 Les gens l'ont consulté

@keyframes est une règle CSS qui peut être utilisée pour définir le comportement d'un cycle d'animations CSS ; elle doit être utilisée avec l'attribut d'animation pour créer des effets d'animation simples. Utilisez les propriétés d'animation pour contrôler l'apparence des animations et lier les animations aux sélecteurs.

Comment utiliser la règle CSS @keyframes

Comment utiliser les règles CSS @keyframes ?

Les animations peuvent être créées via les règles @keyframes.

Syntaxe

@keyframes animationname {keyframes-selector {css-styles;}}

Copier après la connexion

animationname : obligatoire. Définit le nom de l'animation.

sélecteur d'images clés : obligatoire. Pourcentage de la durée de l'animation.

Valeurs légales :

Quantity　0-100%

Quantity　de (identique à 0%)

Quantity　à (identique à 100% )

styles CSS Obligatoire. Un ou plusieurs attributs de style CSS légaux

Description :

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Cet ensemble de styles CSS peut être modifié plusieurs fois au cours de l'animation.

Précisez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Remarque : Veuillez utiliser la propriété animation pour contrôler l'apparence de l'animation et lier l'animation au sélecteur.

Attribut css @keyframes Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser la règle CSS @keyframes