Comment démarrer avec l'animation CSS –

Ce qui suit est un court extrait du prochain livre de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.

Considérez l'animation CSS comme la sœur la plus sophistiquée des transitions CSS. Les animations diffèrent des transformations de plusieurs manières:

• Les animations ne se dégradent pas avec grâce. S'il n'y a pas de support du navigateur, l'utilisateur n'a pas de chance. L'alternative est d'utiliser JavaScript.
• Les animations peuvent se répéter et se répéter à l'infini. Les transitions sont toujours finies.
• Les animations utilisent des images clés qui permettent de créer des effets plus complexes et nuancés.
• Les animations peuvent être interrompues au milieu du cycle de lecture.

Les dernières versions de tous les principaux navigateurs prennent en charge Animations CSS. Les versions de Firefox 15 et antérieures nécessitent un préfixe -moz- ; version ultérieure ne Internet Explorer versions 10 et 11 prennent également en charge les animations sans préfixe, comme le font toutes les versions de Microsoft Edge.

Nous pouvons vérifier la prise en charge des animations CSS de plusieurs manières. La première consiste à tester la présence de CSSKeyframeRule comme méthode de l'objet fenêtre :

 const hasAnimations = 'CSSKeyframeRule' dans la fenêtre;

Si le navigateur prend en charge la règle @supports et CSS.supports () nous pouvons l'utiliser à la place:

 const hasAnimations = CSS.supports ('animation- durée: 2s ');

Comme pour les transitions, nous ne pouvons animer que des valeurs interpolables telles que les valeurs de couleur, les longueurs et les pourcentages.

Création de votre première animation

Nous devons d'abord définir une animation à l'aide de @keyframes règle. La règle @keyframes a deux objectifs:

• définir le nom de notre animation
• regrouper nos règles d'images clés

Créons une animation nommée pulse :

 @ images clés impulsion {

}

Nos images clés seront définies dans ce bloc. Dans l'animation, une image clé est un point auquel l'action change. Avec les animations CSS en particulier, les règles d'image clé sont utilisées pour définir des valeurs de propriété à des points particuliers du cycle d'animation. Les valeurs comprises entre les valeurs d'une règle d'image clé sont interpolées.

Au minimum, une animation nécessite deux images clés: une image clé à partir de qui est l'état initial de notre animation, et à frame, qui est son état final. Dans chaque bloc d'image clé individuel, nous pouvons définir les propriétés à animer:

 @keyframes pulse {
    de {
        transformer: échelle (0.5);
        opacité: 0,8;
    }

    à {
        transformer: échelle (1);
        opacité: 1;
    }
}

Ce code redimensionne notre objet de la moitié de sa taille à sa taille maximale et change l'opacité de 80% à 100%.

La règle sur les images clés uniquement définit an animation, cependant. En soi, les éléments ne bougent pas. Nous devons l'appliquer. Définissons également une classe pulse que nous pouvons utiliser pour ajouter cette animation à n’importe quel élément:

 .pulse {
    animation: pouls 500ms;
}

Ici, nous avons utilisé la propriété abrégée animation pour définir le nom et la durée de l’animation. Pour qu'une animation soit lue, nous avons besoin du nom d'une règle @keyframes (dans ce cas, pulse ) et d'une durée. D'autres propriétés sont facultatives.

L'ordre des propriétés de l'animation est similaire à celui de la transition . La première valeur pouvant être analysée devient la valeur de animation-duration . La deuxième valeur devient la valeur de retard d'animation . Les mots qui ne sont pas des mots clés à l'échelle de CSS ou des mots clés de propriété d'animation sont supposés être des noms de jeux de règles @keyframe .

également avec transition accepte une liste d'animation. La liste d'animation est une liste de valeurs séparées par des virgules. Nous pourrions, par exemple, diviser notre animation par impulsions en deux règles: pulse et fade :

 @keyframes pulse {
    de {
        transformer: échelle (0.5);
    }
    à {
        transformer: échelle (1);
    }
}

@keyframes s'estompe {
    de {
        opacité: .5;
    }
    à {
        opacité: 1;
    }
}

Ensuite, nous pourrions les combiner en une seule animation:

 .pulse-and-fade {
    animation: pouls 500ms, fondu 500ms;
}

Propriétés d'animation

Bien que l'utilisation de la propriété animation soit plus courte, les propriétés longues sont parfois plus claires. Les propriétés de l'animation longue sont énumérées ci-dessous:

Les propriétés animation-delay et animation-duration fonctionnent comme délai de transition et transition-duration . Les deux acceptent les unités de temps sous forme de valeur, soit en secondes ( s ) ou en millisecondes ( ms ). Les valeurs de temps négatives sont valides pour retard d'animation mais pas animation-duration .

Réécrivons notre jeu de règles .pulse en utilisant les propriétés longhand. Cela nous donne ce qui suit:

 .pulse {
    nom de l'animation: pulse;
    durée d'animation: 500ms;
}

La propriété nom-animation est assez simple. Sa valeur peut être none ou le nom de la règle @keyframes . Les noms d'animation ont peu de restrictions. Les mots-clés CSS tels que initial héritent default et none sont interdits. La plupart des caractères de ponctuation ne fonctionneront pas, alors que les lettres, les traits de soulignement, les chiffres et les caractères emojis (et autres caractères Unicode) le seront généralement. Pour des raisons de clarté et de facilité de maintenance, il est recommandé de donner à vos animations des noms descriptifs et d'éviter d'utiliser des propriétés CSS ou des emojis en tant que noms.

Pour boucler ou ne pas boucler: la propriété animation-iteration-count 19659014] Si vous suivez avec votre propre code, vous remarquerez que cette animation ne se produit qu'une fois. Nous voulons que notre animation se répète. Pour cela, nous avons besoin de la propriété animation-iteration-count .

La propriété animation-iteration-count accepte la plupart des valeurs numériques. Les nombres entiers et les nombres décimaux sont des valeurs valides. Avec les nombres décimaux, cependant, l'animation s'arrêtera au cours du dernier cycle d'animation, se terminant dans l'état à . Les valeurs négatives animation-iteration-count sont traitées de la même manière que 1 .

Pour exécuter une animation indéfiniment, utilisez le mot clé infinite . L'animation jouera un nombre infini de fois. Bien entendu, infinite signifie en réalité que tant que le document n'est pas déchargé, la fenêtre du navigateur se ferme, les styles d'animation sont supprimés ou le périphérique s'arrête. Rendons notre animation infinie:

 .pulse {
    nom de l'animation: pulse;
    durée d'animation: 500ms;
    animation-iteration-count: infini;
}

Ou, en utilisant l'animation raccourci:

 .pulse {
    animation: pouls 500ms infini;
}

Jeu d'animations: la animation-direction propriété

Notre animation présente cependant toujours un problème. pulser ne répète pas notre animation. Ce que nous voulons, c'est que cet élément évolue. Entrez la propriété animation-direction .

La propriété animation-direction accepte l'une des quatre valeurs suivantes:

• normal : la valeur initiale, en jouant le animation comme spécifié
• reverse : retourne le de et à et indique l'animation en sens inverse
• alternative : joue les cycles d'animation paires sont inversés
• alternate-reverse : lit les cycles d'animation impairs en sens inverse

Pour continuer avec notre exemple actuel, reverse réduirait notre objet par un facteur de 0,5. En utilisant alternate nous ferions évoluer notre objet pour les cycles impairs et vers le bas pour les numéros pairs. Inversement, en utilisant alternate-reverse nous réduirions notre objet pour les cycles impairs et pour les cycles pairs. Comme c’est l’effet que nous voulons, nous définirons notre propriété animation-direction sur alternate-reverse :

 .pulse {
    nom de l'animation: pulse;
    durée d'animation: 500ms;
    animation-iteration-count: infini;
    animation-direction: reverse-reverse;
}

Ou, en utilisant la propriété abrégée:

 .pulse {
    animation: pouls 500ms infini-reverse-reverse;
}

Utilisation d'images clés en pourcentage

Notre exemple précédent était une simple animation par impulsions. Nous pouvons créer des séquences d'animation plus complexes en utilisant des images clés en pourcentage. Plutôt que d'utiliser de et à les images clés en pourcentage indiquent des points de changement spécifiques au cours de l'animation. Voici un exemple utilisant une animation nommée wiggle :

 @keyframes wiggle {
    25% {
        transformer: scale (.5) skewX (-5deg) pivoter (-5deg);
    }
    50% {
        transformer: skewY (5deg) faire pivoter (5deg);
    }
    75% {
        transformer: skewX (-5deg) tourner (-5deg) échelle (1.5);
    }
    100% {
        transformer: échelle (1.5);
    }
 }

Nous avons utilisé des incréments de 25% ici, mais ces images clés peuvent être 5%, 10% ou 33,2%. Au fur et à mesure de la lecture de l'animation, le navigateur interpolera les valeurs entre chaque état. Comme avec notre exemple précédent, nous pouvons l'assigner à un sélecteur:

 / * Notre animation sera jouée une fois * /
 .wiggle {
    nom de l'animation: wiggle;
    durée d'animation: 500ms;
}

Ou en utilisant la propriété animation raccourcie:

 .wiggle {
    animation: tortiller 500ms;
}

Il n’ya qu’un problème ici. Lorsque notre animation se termine, elle retourne à l'état original pré-animé. Pour empêcher cela, utilisez la propriété animation-fill-mode .

La propriété animation-fill-mode

Les animations n'ont aucun effet sur les propriétés avant qu'elles ne commencent ou après qu'elles arrête de jouer. Mais comme vous l'avez vu avec l'exemple wiggle une fois qu'une animation se termine, elle revient à son état de pré-animation. Avec animation-fill-mode nous pouvons remplir ces états avant le début et la fin de l'animation.

La propriété animation-fill-mode accepte l'une des quatre valeurs suivantes: [19659015] none : l'animation n'a aucun effet lorsqu'elle n'exécute pas

en avant : lorsque l'animation se termine, les valeurs de propriété de l'état de fin restent applicables

vers l'arrière : les valeurs de propriété de la première image clé seront appliquées pendant le délai d'animation

: les effets pour et vers l'arrière s'appliquent [19659007] Puisque nous voulons que notre élément animé reste dans son état final, nous allons utiliser animation-fill-mode: forwards . ( animation-fill-mode: les deux fonctionneraient aussi.)

L'effet de animation-fill-mode: vers l'arrière est le plus apparent lorsque le retard d'animation la propriété est définie sur 500ms ou supérieure. Lorsque animation-fill-mode est défini sur vers l'arrière les valeurs de propriété de la première image-clé sont appliquées, mais l'animation n'est pas exécutée avant l'expiration du délai.

Comme cela a été mentionné, les animations peuvent être interrompues. Les transitions peuvent être inversées en cours de route ou arrêtées complètement en changeant le nom d'une classe. Les animations, quant à elles, peuvent être interrompues pendant le cycle de lecture en utilisant animation-play-state . Il a deux valeurs définies - en cours d'exécution et en pause - et sa valeur initiale est en cours d'exécution .

Examinons un exemple simple d'utilisation de l'animation -play-state pour lire ou mettre en pause une animation. Tout d'abord, notre CSS:

 .wobble {
    animation: alternance des wobbles 3s en avant et en avant;
    animation-play-state: en pause;
}
.fonctionnement {
    animation-play-state: en cours d'exécution;
}

Nous avons ici deux blocs de déclaration: wobble qui définit une animation d'oscillation, et exécutant qui définit un état de lecture. Dans le cadre de notre déclaration animation nous avons mis en pause une valeur de animation-play-state de . Pour exécuter notre animation, nous allons ajouter la classe exécutant à notre élément. Supposons que notre balisage comporte un bouton d'animation Run avec un id du trigger :

 const trigger = document.querySelector ('# trigger');
const moveIt = document.querySelector ('. wobble');

trigger.addEventListener ('click', function () {
    moveIt.classList.toggle ('running');
})

L'ajout de .running à notre élément remplace la valeur de animation-play-state définie dans .wobble et provoque la lecture de l'animation.

Détection du début, de la fin ou de la répétition des animations

Comme les transitions, les animations déclenchent un événement lorsqu'elles se terminent: animationend . Contrairement aux transitions, les animations déclenchent également des événements animationstart et animationiteration lorsqu'elles commencent à se répéter. Comme pour les transitions, vous pouvez utiliser ces événements pour déclencher une autre action sur la page. Vous utiliseriez peut-être animationstart pour révéler de manière contextuelle un bouton Stop Animation ou animationend pour révéler un bouton Replay .

peut écouter ces événements avec JavaScript. Ci-dessous, nous écoutons l’événement animationend :

 const animate = document.getElementById ('animate');

animate.addEventListener ('animationend', function (eventObject) {
    // Faire quelque chose
})

Ici aussi, la fonction de gestionnaire d'événements reçoit un objet événement comme seul argument. Afin de déterminer quelle animation s'est terminée, nous pouvons interroger la propriété animationName de l'objet événement.

Une note sur l'accessibilité

Les transitions et animations peuvent améliorer l'expérience utilisateur en rendant les interactions souples , et sinon faire plaisir à l'interface. Mais ils ont toujours des risques d’accessibilité. Les grandes animations de filage, par exemple, peuvent provoquer des étourdissements ou des nausées chez les personnes souffrant de troubles vestibulaires, tels que les vertiges [5]. Les animations clignotantes peuvent déclencher des crises chez certaines personnes atteintes d'épilepsie photosensible [6]. Utilisez-les avec parcimonie et envisagez fortement de donner aux utilisateurs la possibilité de les désactiver. Nous discutons d'une méthode pour ce faire - la requête de média préfère le mouvement réduit - au chapitre “Application de CSS conditionnelle”.

Remarque sur les performances

effectuer des transitions et des animations que d’autres. Si une animation met à jour une propriété qui déclenche une redistribution ou une repeinte, elle risque de ne pas fonctionner correctement sur les périphériques peu puissants tels que les téléphones et les tablettes.

Les propriétés qui déclenchent une redistribution affectent la mise en page. Ceux-ci incluent les biens animables suivants:

• border-width (et border - * - width properties)
• border (et border - propriétés)
• en bas
• taille de la police
• poids de la police
• hauteur ]
• left
• hauteur de ligne
• margin (et margin - * properties)
• Hauteur minimale
• Largeur minimale
• Hauteur maximale
• Largeur max
• padding (et padding - * propriétés)
• right
• top
• vertical-align [19659004] width

Lorsque ces propriétés sont animées, le navigateur doit recalculer t la taille et la position des éléments affectés et souvent voisins. Utilisez les transformations où vous le pouvez. La transition ou l'animation de transformations de traduction (par exemple, transform: translate (100px, 200px) ) peut remplacer top à gauche right et en bas propriétés. Dans certains cas, les animations hauteur et width peuvent être remplacées par une transformation .

Parfois, le déclenchement d'une redistribution (ou mise à jour de la mise en page) est inévitable. Dans ces cas, minimisez le nombre d'éléments affectés et utilisez des astuces (telles que des retards négatifs) pour réduire la durée perçue de l'animation.

Les propriétés qui déclenchent un repeindre sont généralement celles qui provoquent un changement de couleur. Ceux-ci incluent:

• background
• background-image
• background-position
• 19659004] taille de fond
• bordure de frontière
• style de bordure
• box-shadow
• couleur
• contours
• contours
• contours
• largeur du contour

Les modifications apportées à ces propriétés sont moins coûteuses à calculer que celles affectant la mise en page, mais elles ont tout de même un coût. Les modifications apportées à box-shadow et border-radius sont particulièrement coûteuses à calculer, en particulier pour les appareils de faible puissance. Faites preuve de prudence lorsque vous animez ces propriétés.

Tiffany B. Brown est un développeur web indépendant et rédacteur technique basé à Los Angeles. Brown offre des services de développement Web et de conseil à de grandes agences et à de petites entreprises. Ancien membre de l'équipe des relations avec les développeurs de Opera Software, Brown est également co-auteur du livre JumpStart HTML5 de SitePoint. Elle écrit de façon sporadique sur la technologie de développement Web sur son blog . Vous pouvez la suivre sur Twitter à @webinista .