Share
De nos jours, de plus en plus de sites Web utilisent des animations, qu'il s'agisse de fichiers GIF, SVG, WebGL, de vidéos d'arrière-plan, etc. Lorsqu'elle est utilisée correctement, l'animation sur le Web apporte vie et interactivité, ajoutant une couche supplémentaire de commentaires et d'expérience aux utilisateurs..
Dans ce tutoriel, je vais vous présenter les animations CSS. une façon très performante de faire les choses qui devient de plus en plus populaire à mesure que le support du navigateur augmente. Après avoir couvert les bases, nous allons construire un exemple rapide qui animera un élément carré dans un cercle:
Les concepteurs d'Envato Market ont été occupés à créer une gamme d'animations CSS que vous pouvez connecter à vos sites Web, des ombres aux rubans, en passant par des curseurs, etc..
CSS3 Shadow Pack sur le marché EnvatoVous pouvez également engager un expert CSS sur Envato Studio pour vous aider avec une large gamme de correctifs et de personnalisations pour votre projet..
Experts CSS sur Envato StudioLe composant principal des animations CSS est @ keyframes, la règle CSS où l'animation est créée. Penser à @ keyframes comme étant des étapes le long d'une chronologie. À l'intérieur @ keyframes, vous pouvez définir ces étapes, chacune ayant une déclaration de style différente.
Ensuite, pour que les animations CSS fonctionnent, vous devez lier le @ keyframes à un sélecteur. Cela va progressivement analyser tout le code à l’intérieur du @ keyframes déclarations et modifier le style initial en fonction du nouveau style, en fonction des étapes.
Ici, nous allons définir les étapes d'animation. Notre @ keyframes les propriétés sont:
Par exemple:
@keyframes tutsFade 0% opacity: 1; 100% opacité: 0;
ou:
@keyframes tutsFade from opacity: 1; à opacité: 0;
ou le raccourci:
@keyframes tutsFade to opacity: 0;
Le code ci-dessus appliquera une transition à l'opacité d'un élément, de opacité: 1 à opacité: 0. Chacune des approches ci-dessus aboutira au même résultat final.
le animation la propriété est utilisée pour appeler @ keyframes dans un sélecteur CSS. L'animation peut avoir plusieurs propriétés:
Accentsconagua
nom-animation: @ keyframes nom (rappelez-vous que nous avons choisi tutsFade).durée d'animation: la durée, la durée totale de l'animation du début à la fin.animation-minuterie-fonction: définit la vitesse d'animation ( linéaire | facilité | facilité d'accès | soulagement | facilité d'accès | cube cubique ).délai d'animation: le délai avant le début de notre animation.animation-iteration-count: Combien de fois il va itérer à travers l'animation.animation-direction: vous permet de changer le sens de la boucle, du début à la fin ou de la fin au début, ou les deux.mode de remplissage d'animation: spécifie les styles qui seront appliqués à l'élément lorsque notre animation sera terminée ( aucun | en avant | en arrière | tous les deux )Par exemple:
.element nom-animation: tutsFade; animation-durée: 4s; délai d'animation: 1s; animation-iteration-count: infini; animation-timing-function: linéaire; animation-direction: alternative;
ou sténographie:
.element animation: tutsFade 4s 1s alternative linéaire infinie;
Le code ci-dessus crée un effet clignotant, avec un délai d’animation d’une seconde, une durée totale d’animation de 4 secondes, avec des itérations alternées de direction et des boucles linéaires infinies..
Bien qu’il s’agisse d’un brouillon, nous devons utiliser des préfixes spécifiques au navigateur pour garantir la meilleure prise en charge possible du navigateur. Les préfixes standard s'appliquent:
-webkit- -moz- -o- -Mme- Un animation propriété utilisant des préfixes de vendeur ressemblera à:
.element -webkit-animation: tutsFade 4s 1s alternatif linéaire infini; -moz-animation: tutsFade 4s 1s alternative linéaire infinie; -ms-animation: tutsFade 4s 1s alternative linéaire infinie; -o-animation: tutsFade 4s 1s alternative linéaire infinie; animation: tutsFade 4s 1s alternatif linéaire infini;
avec @ keyframes:
@ -webkit-keyframes tutsFade / * votre style * / @ -moz-keyframes tutsFade / * votre style * / @ -ms-keyframes tutsFade / * votre style * / @ -o-keyframes tutsFade / * votre style * / @keyframes tutsFade / * votre style * /
Pour des raisons de lisibilité au cours de ce didacticiel, je continuerai sans utiliser de préfixes, mais la version finale les inclura et je vous encourage à les utiliser dans votre code CSS..
Pour en savoir plus sur les préfixes des fournisseurs, vous pouvez consulter http://css3please.com/, un site Web formidable pour les ressources relatives aux préfixes des fournisseurs..
Vous pouvez ajouter plusieurs animations à l'aide d'un séparateur de virgule. Disons que nous voulons ajouter une rotation supplémentaire à notre tutsFade élément, nous le ferions en déclarant extra @ keyframes puis en les liant à notre élément:
.element animation: tutsFade 4s 1s alternatif linéaire infini, tutsRotate 4s 1s alternatif linéaire infini; @keyframes tutsFade to opacity: 0; @keyframes tutsRotate to transformer: rotation (180deg);
Faisons un saut et créons une transition de forme simple; une animation de carré à cercle en utilisant les principes ci-dessus. Nous aurons cinq étapes au total et pour chaque étape, nous définirons un rayon de bordure, une rotation et une couleur de fond différente de celle de notre élément. Assez parlé, passons au codage.
Commençons par créer le balisage, un élément à animer. Nous n'allons même pas nous embêter avec les noms de classe, nous allons simplement utiliser un simple div pour le moment:
Puis, en utilisant un sélecteur d’élément (div ), Ajouter un style par défaut à la div:
div width: 200px; hauteur: 200px; couleur de fond: corail;
Maintenant préparons @ keyframes, que nous appellerons carré à cercle, et les cinq étapes
@ images clés carré à cercle 0% 25% 50% 75% 100%
Nous devons définir des styes au sein de ces étapes, commençons par dicter la rayon de la frontière pour chaque coin du carré:
@ -webkit-keyframes carré-à-cercle 0% border-radius: 0 0 0 0; 25% border-radius: 50% 0 0 0; 50% bord de rayon: 50% 50% 0 0; 75% rayon de bordure: 50% 50% 50% 0; 100% rayon-rayon: 50%;
De plus, nous pouvons déclarer un autre Couleur de fond pour chaque étape.
@ images clés carré à cercle 0% border-radius: 0 0 0 0; fond: corail; 25% border-radius: 50% 0 0 0; fond: darksalmon; 50% bord de rayon: 50% 50% 0 0; fond: indianred; 75% rayon de bordure: 50% 50% 50% 0; fond: lightcoral; 100% rayon-rayon: 50%; fond: darksalmon;
Pour vraiment frapper à la maison, allons au-delà rayon de la frontière et Couleur de fond en tournant la div et en ajoutant un peu d'intérêt visuel.
@ images clés carré à cercle 0% border-radius: 0 0 0 0; fond: corail; transformer: faire pivoter (0deg); 25% border-radius: 50% 0 0 0; fond: darksalmon; transformer: faire pivoter (45 °); 50% bord de rayon: 50% 50% 0 0; fond: indianred; transformer: faire pivoter (90 °); 75% rayon de bordure: 50% 50% 50% 0; fond: lightcoral; transformer: faire pivoter (135 ° C); 100% rayon-rayon: 50%; fond: darksalmon; transformer: faire pivoter (180deg);
Après avoir défini notre animation de carré à cercle, nous devons l’appliquer à la div:
div width: 200px; hauteur: 200px; couleur de fond: corail; animation: alternance infinie carré-à-cercle 2s 1s;
Ici, vous voyez que nous avons ajouté un raccourci animation propriété, qui dit:
carré à cercle.2s.1s.infini, donc il continuera indéfiniment.alterner, donc il va jouer du début à la fin, puis au début, puis à la fin, et ainsi de suite. Une dernière valeur que nous pouvons ajouter à la propriété animation est le animation-minuterie-fonction. Cela définira la vitesse, l'accélération et la décélération de notre mouvement. Cette fonction peut être une valeur très détaillée, ce qui est difficile à calculer manuellement, mais de nombreux sites Web gratuits fournissent des ressources et permettent une personnalisation en temps réel des fonctions de minutage d'animation..
L’un de ces outils est l’outil d’animation d’assouplissement des feuilles de style CSS, alors utilisons-le pour calculer notre fonction de minutage..
Je voudrais ajouter un élastique effet à notre carré à cercle animation, utilisant une fonction cubique-bezier.
Après avoir manipulé les poignées et généré une sorte de courbe de Bézier, mettez à jour la valeur de la fonction de minutage de l'animation à l'aide de l'extrait de code fourni..
div width: 200px; hauteur: 200px; couleur de fond: corail; animation: carré à cercle 2s 1s infini cube de Bézier (1, 0,015, 0,295,1,225) alterné;
Le code final, sans utiliser les préfixes de fournisseur ( -webkit- , -moz-, -Mme-, -o- ) est comme suit:
div width: 200px; hauteur: 200px; couleur de fond: corail; animation: carré à cercle 2s .5s infini cubique-Bézier (1, .015, .295, .255) alterné; @ images clés carré à cercle 0% border-radius: 0 0 0 0; fond: corail; transformer: faire pivoter (0deg); 25% border-radius: 50% 0 0 0; fond: darksalmon; transformer: faire pivoter (45 °); 50% bord de rayon: 50% 50% 0 0; fond: indianred; transformer: faire pivoter (90 °); 75% rayon de bordure: 50% 50% 50% 0; fond: lightcoral; transformer: faire pivoter (135 ° C); 100% rayon-rayon: 50%; fond: darksalmon; transformer: faire pivoter (180deg);
Tout fonctionne bien dans les navigateurs modernes, mais Firefox a la vilaine habitude de rendre les objets transformants médiocres. Regardez ces lignes déchiquetées pour voir ce que je veux dire:
Heureusement, il existe une solution de contournement pour cela. Ajoutez le contour transparent suivant à votre div et Firefox rendra les choses parfaitement!
contour: 1px solide transparent;
C'est tout! Nous avons utilisé la syntaxe CSS Animation pour créer une animation simple et répétée..
Pour des informations à jour sur le support des navigateurs pour l'animation CSS, consultez Puis-je utiliser… mais en résumé, les navigateurs suivants sont pris en charge: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+.
