Comment animer avec CSS

Nous nous sommes habitués à voir des animations sur des sites Web et à profiter de l'énergie et de la variété qu'elles apportent à la conception Web. Ils sont accrocheurs, un excellent moyen d'ajouter un intérêt visuel à un site et rendent généralement l'expérience plus excitante pour vos utilisateurs.

Bien qu'elles soient traditionnellement réalisées avec des GIF, des SVG, WebGL et des vidéos d'arrière-plan, les animations peuvent également être créées efficacement avec CSS. La prise en charge des navigateurs pour les animations CSS s'est considérablement améliorée et devient très populaire - les navigateurs compatibles incluent Firefox 5+, IE 10+, Chrome, Safari 4+ et Opera 12+.

Aujourd'hui, je vais vous expliquer les bases de la création d'une animation CSS avec une démonstration étape par étape. Restez dans les parages après cela et découvrez cinq exemples d'animations. Vous pourrez utiliser toutes ces idées pour créer des animations pour vos propres projets !

Principes de base des animations CSS

De toute évidence, il est important de couvrir les bases du fonctionnement des animations avant de plonger dans les cinq animations CSS amusantes.
Par exemple, les images clés sont un élément clé des animations CSS. Vous connaissez peut-être ce terme si vous avez travaillé avec Adobe Flash ou si vous avez de l'expérience dans le montage vidéo. Dans ce cas, le terme image clé est exactement ce que vous pensez : c'est une façon de spécifier une certaine action.

Vous avez peut-être déjà rencontré @keyframes dans une feuille de style CSS. À l'intérieur de ces @keyframes , vous définissez les styles et les étapes de l'animation. Voici un excellent exemple d'effet de fondu :

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Les bases de l'image clé de fondu que nous venons de créer incluent :

• Un nom descriptif : dans ce cas, fadeOut.
• Étapes de l'animation : De était défini sur 0 % et Jusqu'à était défini sur 100 %.
• Styles CSS qui seront appliqués à chaque étape.

Par défaut, le From sera à 0% et le To sera à 100%, car aucune autre étape n'est spécifiée dans cet exemple.

Actions spécifiques avec des sous-propriétés d'animation

Nous devons faire un peu plus pour styliser les choses - nous devons styliser la propriété d' animation avec des sous-propriétés. Si les images clés définissent à quoi ressemblera l'animation, les sous-propriétés d'animation définissent des règles spécifiques pour l'animation. Celles-ci vous permettent de configurer le minutage, la durée et d'autres détails clés sur la progression de la séquence d'animation.

La propriété animation est utilisée pour appeler @keyframes dans un sélecteur CSS. Les animations peuvent avoir et auront souvent plus d'une sous-propriété. Voici des exemples de sous-propriétés :

Partenariat avec un artiste en animation graphique

Rien de tel que l'animation pour donner vie à vos créations. Mais si vous n'avez jamais travaillé avec un animateur ou un graphiste, le mouvement peut sembler être un monde étranger. Si vous pensez à p...

• Animation-name : nom de la règle-at @keyframes , qui décrit les images clés de l'animation. Le nom fadeOut dans l'exemple précédent est un exemple d'animation-name.
• Durée de l' animation : durée nécessaire à une animation pour effectuer un cycle complet.
• Animation-timing-function : synchronisation de l'animation, en particulier comment l'animation passe par les images clés. Cette fonction a la capacité d'établir des courbes d'accélération. Les exemples sont linear, easy, easy-in, easy-out, easy-in-out ou cubic-bezier .
• Animation-delay : délai entre le moment où l'élément est chargé et le début de l'animation.
• Animation-iteration-count : nombre de fois que l'animation doit se répéter. Vous voulez que l'animation dure indéfiniment ? Vous pouvez spécifier infini pour répéter l'animation indéfiniment.
• Animation-direction : si l'animation doit ou non changer de direction à chaque passage de la séquence ou revenir au point de départ et se répéter.
• Animation-fill-mode : valeurs appliquées par l'animation avant et après l'exécution.
• Animation-play-state : avec cette option, vous pouvez mettre en pause et reprendre la séquence d'animation. Les exemples sont aucun, en avant, en arrière ou les deux .

Tout rassembler pour une meilleure prise en charge du navigateur

Il se passe beaucoup de choses ici, et la terminologie peut être un peu déroutante. Mais nous savons maintenant que les images clés définissent à quoi ressemblera l'animation ainsi que les différentes étapes de l'animation, et que la propriété animation utilise des sous-propriétés pour définir les options d'animation telles que le délai, la direction, la synchronisation, etc.

Vous connaissez probablement les préfixes des fournisseurs ou des navigateurs - ceux-ci sont nécessaires lorsque vous travaillez avec des animations. Nous devons nous assurer que nous avons le meilleur support de navigateur. Voici les préfixes de navigateur standard :

• Chrome & Safari : -webkit-
• Firefox : -moz-
• Internet Explorer : -ms-

Internet Explorer 10 ne nécessite pas de préfixe pour les transitions, mais toutes les transformations nécessitent le préfixe. Opera est couvert car il reconnaît les styles WebKit.

Début de transition

• -webkit-transition
• -moz-transition
• transition

Début de la transformation :

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Cinq animations en action

Maintenant que nous avons couvert les bases, créons du code à utiliser !

Animation 1 : du cercle au carré

Détaillons ce premier, afin que nous puissions nous assurer que nous comprenons tous les concepts que nous avons couverts jusqu'à présent. L'animation commencera par un cercle et se transformera en un carré.

Créer un div pour commencer est un excellent moyen de tester l'animation :

<div class=”animationOne”>
</div>

Maintenant, configurons nos @keyframes . Cette animation comportera cinq étapes car un carré a quatre côtés et nous devons avoir un point de départ de 0 %. Utilisez des préfixes, comme indiqué ci-dessous, mais pour le reste du didacticiel, nous resterons simples avec juste les bases.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Maintenant, créons quelques styles pour déterminer à quoi ressemblera le rayon de la bordure à chaque étape :

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Ajoutez maintenant la propriété background-color pour aider à différencier chaque étape de l'animation :

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Enfin, appliquons l'animation à la div test :

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

La propriété animation est généralement écrite en sténographie, voici donc ce qui se passe réellement dans le code :

• Le nom de l'animation est circle-to-square .
• La durée de l'animation est de 2s .
• Le délai d'animation est de 1s .
• Le nombre d'itérations d'animation est infinite , il continuera donc indéfiniment.
• Et la direction de l'animation est alternate . Cela signifie qu'il jouera du début à la fin et reviendra au début.

Animation 2 : rotation

Cette animation permet la rotation d'un objet.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Pour garder nos projets d'animation séparés, n'oubliez pas de créer une autre div pour ce deuxième exemple. J'ai ajouté une couleur d'arrière-plan car nous allons ajouter l'animation à la div elle-même pour cet exemple.

La durée de cette animation est de deux secondes, avec un délai de trois secondes. Le nombre d'itérations d'animation est de cinq, donc ce projet s'animera cinq fois avant de s'arrêter. L'animation est jouée en sens inverse à chaque temps impair (1,3,5,… ) et dans le sens normal à chaque temps pair (2,4,6,… ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animation 3 : s'étendre et scintiller

Il s'agit d'une excellente animation pour un bouton car elle est plus accrocheuse et proéminente par rapport aux autres éléments de la page. Cela pourrait également être quelque chose d'intéressant à inclure dans un état :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Pour utiliser ce test, nous avons besoin de la div de démarrage suivante :

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animation quatre : diapositive de texte
Ajoutons une animation au texte. Ce projet fait glisser votre texte une fois à partir de la gauche.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animation 5 : fondu enchaîné

Avez-vous du contenu surprise? Découvrez cette animation de fondu enchaîné pour le contenu que vous souhaitez voir apparaître ultérieurement. Vous avez beaucoup d'options ici : le fondu entrant peut être rapide ou lent, se produire une ou plusieurs fois, etc.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

Les animations CSS3 sont fantastiques pour faire bouger et groover votre site Web ! Maintenant que vous maîtrisez les concepts de base pour créer des animations, les possibilités d'animation sont infinies. Qu'allez-vous animer ?