Comment commencer avec l'animation CSS

Animation CSS: effets dynamiques au-delà de la transition CSS

L'animation CSS est une version avancée de la transition CSS. Cet article explorera tous les aspects de l'animation CSS pour vous aider à maîtriser facilement cette puissante technologie de conception Web.

Créer CSS Animation: images clés et propriétés d'animation

Pour créer une animation CSS, vous devez d'abord définir une règle @keyframes qui spécifie le nom d'animation et regroupe les règles de l'image clé. Ensuite, appliquez l'animation à l'élément cible.

L'animation CSS peut être contrôlée à travers une variété d'attributs, y compris: animation-delay (retard d'animation), animation-duration (durée d'animation), animation-name (nom d'animation), animation-timing-function (fonction de synchronisation d'animation), 🎜 > (nombre d'itérations d'animation), animation-iteration-count (direction d'animation), animation-direction (statut de lecture d'animation) et animation-play-state (mode de remplissage d'animation). animation-fill-mode

Contrôle d'animation: pause et boucle

Utilisez l'attribut

à l'animation en pause. La définition de la propriété animation-play-state sur animation-iteration-count peut atteindre des boucles infinies. infinite

Performances et accessibilité: utilisez l'animation avec prudence

Bien que l'animation CSS puisse améliorer l'expérience utilisateur, elle doit être utilisée avec prudence car elle peut présenter un risque d'accessibilité, par exemple: les patients atteints de certaines maladies peuvent ressentir des étourdis Le potentiel d'être utilisé chez les personnes atteintes d'épilepsie photosensible. De plus, les performances des animations sont également affectées par les propriétés d'animation, et certaines propriétés peuvent déclencher un reflux ou redessiner, entraînant une dégradation des performances sur des dispositifs à faible performance.

Différence entre l'animation et la transition: différences clés

Il existe des différences clés entre les animations CSS et leur technologie Sister Technology CSS:

• Downgrade élégant: L'animation manque d'un mécanisme de dégradation élégant.
• Loop: L'animation peut être répétée, même répétitive indéfiniment;
• Les images clés: L'animation utilise des images clés pour créer des effets plus complexes et détaillés.
• Pause: L'animation peut être interrompue pendant le cycle de lecture.

Compatibilité du navigateur: support du navigateur grand public

Les dernières versions de tous les navigateurs grand public prennent en charge l'animation CSS. Firefox 15 et plus tôt nécessitent le préfixe

; plus tard ne le fait pas. Internet Explorer 10 et 11, ainsi que toutes les versions de Microsoft Edge, prend également en charge les animations préfixées. -moz-

Prise en charge de l'animation de détection: Méthode JavaScript

Le support d'animation CSS peut être détecté de différentes manières. La première méthode consiste à tester si la méthode window de l'objet CSSKeyframeRule existe:

const hasAnimations = 'CSSKeyframeRule' in window;

Si le navigateur prend en charge @supports Règles et CSS.supports() API, vous pouvez utiliser les méthodes suivantes:

const hasAnimations = CSS.supports('animation-duration: 2s');

Créez la première animation: règles de la transaction clé et applications d'animation

Tout d'abord, définissez l'animation à l'aide de la règle @keyframes. @keyframes Les règles ont deux fonctions:

• Définissez le nom d'animation
• Règles de l'image clé de groupe

Par exemple, créez une animation appelée pulse:

@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

Ensuite, appliquez l'animation à l'élément:

.pulse {
    animation: pulse 500ms;
}

Explication détaillée des attributs d'animation: Contrôler soigneusement les effets d'animation

Bien que l'utilisation d'attributs de sténographie soit plus simple, l'utilisation parfois de l'utilisation d'attributs de format long est plus clair. Voici les propriétés d'animation à long format: animation Propriétés Description Valeur initiale head> Animation-delay Temps d'attente avant l'exécution de l'animation 0s (exécuter maintenant) Durée d'animation Durée du cycle d'animation 0s (pas d'animation) Animation-nom Le nom de la règle Aucun Animation-Timing-Function Comment calculer la valeur entre les états de début et de fin faciliter Animation-iteration-Count Nombre de répétitions d'animation 1 Animation-Direction L'animation est-elle jouée en arrière? normal (pas inversé) Animation-Play-State est l'animation en cours d'exécution ou une pause en cours d'exécution Animation-Fill-Mode Spécifiez la valeur d'attribut appliquée lorsque l'animation n'est pas en cours d'exécution Aucun table>

Animation de la boucle: Animation-iteration-Count attribut

Définition de la propriété animation-iteration-count sur infinite peut rendre la boucle d'animation infiniment.

Direction d'animation: Attribut d'animation-direction

L'attribut

animation-direction accepte quatre valeurs: normal, reverse, alternate, et alternate-reverse, qui sont utilisées pour contrôler la direction de lecture de l'animation.

pour cent des images clés: créez des séquences d'animation plus complexes

Des séquences d'animation plus complexes peuvent être créées à l'aide de cadres clés en pourcentage.

Mode de remplissage d'animation: Attribut d'animation-remplissage en mode

animation-fill-mode Attributs Contrôlez le style d'élément avant et après le début de l'animation.

Pause Animation: Animation-Play-State Attribut

Utilisez l'attribut animation-play-state pour faire de la pause et restaurer les animations.

Détection des événements d'animation: AnimationStart, AnimationEnd and Animationitation Events

Vous pouvez utiliser JavaScript pour écouter les événements animationstart, animationend et animationiteration.

Optimisation des performances: sélectionnez les attributs d'animation appropriés

Certaines propriétés fonctionnent mieux que les autres propriétés. Évitez les animations des propriétés qui déclenchent le reflux ou redessiner.

FAQ

L'article comprend également des questions fréquemment posées sur l'animation CSS, couvrant les différences entre l'animation CSS et la transition CSS, le contrôle de la vitesse d'animation, le rôle des règles @keyframes, l'animation de mise en page, l'animation de lecture inversée, animation-fill-mode Attributs, Pause Animation , Animation de boucle infinie, animation d'élément SVG et les différences entre animation-delay et animation-end-delay.

En étudiant cet article, vous pourrez créer des effets d'animation CSS plus raffinés et complexes pour améliorer l'interactivité et l'expérience utilisateur de la page Web. N'oubliez pas que lorsque vous utilisez des animations, vous priorisez toujours les performances et l'accessibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!