Animations CSS3

Animation CSS3

CSS3, nous pouvons créer des animations, qui peuvent remplacer de nombreuses images animées de pages Web, animations Flash et JAVAScripts.

Règles CSS3 @keyframes

Pour créer des animations CSS3, vous devrez comprendre les règles @keyframes.

La règle @keyframes sert à créer des animations. Spécifiez un style CSS et une animation dans la règle @keyframes qui passeront progressivement du style actuel au nouveau style.

Animations CSS3

Lors de la création d'animations dans @keyframes, liez-le à un sélecteur, sinon l'animation n'aura aucun effet.

Spécifiez qu'au moins deux propriétés d'animation CSS3 sont liées à un sélecteur :

Spécifiez le nom de l'animation

Spécifiez la durée de l'animation

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

Propriétés d'animation CSS3

Le tableau suivant répertorie les règles @keyframes et toutes les propriétés d'animation : Animation CSS. 3

Les attributs d'abréviation de tous les attributs d'animation d'Animation, à l'exception de la propriété Animation-Play-State. 3

animation-name spécifie le nom de l'animation @keyframes. 3

Animation-Duration stipule que l'animation complète la seconde ou les millisecondes passées dans un cycle. La valeur par défaut est 0. 3

animation-timing-function spécifie la courbe de vitesse de l'animation. La valeur par défaut est « facilité ». 3

animation-delay spécifie quand l'animation démarre. La valeur par défaut est 0. . La valeur par défaut est 1. 3

animation-direction spécifie si l'animation est jouée à l'envers lors du cycle suivant. La valeur par défaut est "normale". 3

animation-play-state précise si l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution". 3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>

rrree

Qu'est-ce que l'animation CSS3 ?

L'animation est l'effet de changer progressivement un élément d'un style à un autre.

Vous pouvez changer autant de styles que vous le souhaitez autant de fois que vous le souhaitez.

Veuillez préciser l'heure à laquelle le changement se produit en pourcentage, ou utiliser les mots-clés « de » et « à », qui sont équivalents à 0 % et 100 %.

0% est le début de l'animation, 100% est la fin de l'animation.

Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> </head> <body> <div></div> <p><b>注释：</b>当动画完成时，会变回初始的样式。</p> <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Animations CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]