Animation - Astuces CSS

Anonim

La animationpropriété CSS peut être utilisé pour animer de nombreuses autres propriétés CSS telles que color, background-color, height, ou width. Chaque animation doit être définie avec la @keyframesrègle at qui est ensuite appelée avec la animationpropriété, comme ceci:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Chaque @keyframesrègle at définit ce qui doit se passer à des moments précis de l'animation. Par exemple, 0% est le début de l'animation et 100% est la fin. Ces images clés peuvent ensuite être contrôlées soit par la animationpropriété de raccourci , soit par ses huit sous-propriétés, pour donner plus de contrôle sur la manière dont ces images clés doivent être manipulées.

Sous-propriétés

  • animation-name: déclare le nom de la @keyframesrègle at à manipuler.
  • animation-duration: la durée nécessaire à une animation pour terminer un cycle.
  • animation-timing-function: établit des courbes d'accélération prédéfinies telles que easeou linear.
  • animation-delay: le temps entre le chargement de l'élément et le début de la séquence d'animation (exemples sympas).
  • animation-direction: définit la direction de l'animation après le cycle. Sa valeur par défaut se réinitialise à chaque cycle.
  • animation-iteration-count: le nombre de fois que l'animation doit être exécutée.
  • animation-fill-mode: définit les valeurs appliquées avant / après l'animation.
    Par exemple, vous pouvez définir le dernier état de l'animation pour qu'il reste à l'écran, ou vous pouvez le configurer pour qu'il revienne à avant lorsque l'animation a commencé.
  • animation-play-state: mettre en pause / lire l'animation.

Ces sous-propriétés peuvent ensuite être utilisées comme ceci:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

Voici une liste complète des valeurs que chacune de ces sous-propriétés peut prendre:

animation-timing-function facilité, facilité de sortie, facilité d'entrée, facilité de sortie, linéaire, cubic-bezier (x1, y1, x2, y2) (par exemple cubic-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs ou Xms
animation-delay Xs ou Xms
animation-iteration-count X
animation-fill-mode en avant, en arrière, les deux, aucun
animation-direction normal, alterné
animation-play-state en pause, en cours d'exécution, en cours d'exécution

Plusieurs étapes

Si une animation a les mêmes propriétés de début et de fin, il est utile de séparer par des virgules les valeurs 0% et 100% à l'intérieur @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Animations multiples

Vous pouvez également séparer les valeurs par des virgules pour déclarer plusieurs animations sur un sélecteur. Dans l'exemple ci-dessous, nous voulons changer la couleur du cercle en un @keyframeinstant tout en le poussant d'un côté à l'autre avec un autre.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Performance

L'animation de la plupart des propriétés est un problème de performances, nous devons donc procéder avec prudence avant d'animer une propriété. Cependant, certaines combinaisons peuvent être animées en toute sécurité:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Quelles propriétés peuvent être animées?

MDN a une liste de propriétés CSS qui peuvent être animées. Les propriétés animables ont tendance aux couleurs et aux nombres. Un exemple de propriété non animable est background-image.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
4 * 5 * dix 12 5,1 *

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 4 * 6,0 à 6,1 *

Plus d'information

  • animation sur MDN
  • Utilisation des animations CSS
  • animation sur W3C
  • Jank busting pour de meilleures performances de rendu
  • Animation Web au travail
  • Cinq façons d'animer de manière responsable
  • Saut d'état, retards négatifs, animation de l'origine, etc.
  • Démarrage des animations CSS à mi-chemin
  • Animations hautes performances