Maison >interface Web >Questions et réponses frontales >L'animation CSS3 est-elle un logiciel ?

L'animation CSS3 est-elle un logiciel ?

WBOYoriginal: 2022-06-23 16:02:031720parcourir

L'animation CSS3 n'est pas un logiciel. L'animation CSS consiste à changer progressivement les éléments d'un style à un autre, ce qui est réalisé grâce au langage CSS et HTML. L'essence de l'animation CSS est que les propriétés de l'animation peuvent progressivement changer d'une valeur à une autre. , vous pouvez utiliser l'attribut animation avec l'attribut animation pour obtenir des effets d'animation CSS.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

L'animation CSS3 n'est pas un logiciel

CSS peut animer des éléments HTML sans utiliser JavaScript ou Flash ! .

Qu'est-ce que l'animation CSS

L'animation fait changer progressivement un élément d'un style à un autre.

Vous pouvez modifier autant de propriétés CSS que vous le souhaitez.

Pour utiliser l'animation CSS, vous devez d'abord attribuer quelques images clés à l'animation.

Les images clés contiennent le style d'un élément à un moment précis.

Certaines propriétés CSS sont animables, ce qui signifie qu'elles peuvent être utilisées pour des animations et des transitions.

Les propriétés animées peuvent changer progressivement d'une valeur à une autre, comme la taille, la quantité, le pourcentage et la couleur.

Règles @keyframes

Si vous spécifiez un style CSS dans la règle @keyframes, l'animation passera progressivement du style actuel au nouveau style à un moment précis.

Pour que l'animation fonctionne, l'animation doit être liée à un élément.

L'exemple ci-dessous lie l'animation "exemple" à l'élément

L'animation durera 4 secondes, tout en changeant progressivement la couleur d'arrière-plan de l'élément

de "rouge" à "jaune" :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>
</body>
</html>

Résultat de sortie :

Lanimation CSS3 est-elle un logiciel ?

(Partage de vidéo d'apprentissage : css Tutoriel vidéo , tutoriel vidéo HTML)

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!

JavaScript html5 css css3 html animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le lien est-il une nouvelle règle de style en CSS3 ?Article suivant：Le lien est-il une nouvelle règle de style en CSS3 ?

Articles Liés

Voir plus