Optimisation des Animations CSS pour les Jauges

Animation axiale de l’échelle à partir de valeurs en pourcentage
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Adobe Edge Animate CC
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont les suivants:
1. Apprendre à créer des jauges animées efficaces en CSS.
2. Maitriser l'utilisation des symboles et les propriétés de transformation.
3. Gérer les transitions et le timing des animations pour une fluidité optimale.

Découvrez une méthode optimisation des animations CSS pour créer des jauges dynamiques basées sur des valeurs en pourcentage avec des transformations efficaces.

Dans cette vidéo, vous apprendrez à optimiser l'animation des jauges en utilisant les propriétés CSS. Nous commencerons par éliminer les anciens symboles non optimisés et créerons de nouveaux symboles en se basant sur des hauteurs en pourcentage. Vous verrez comment placer correctement les éléments pour éviter les erreurs de dimension et comment utiliser les points d'alignement pour assurer une animation fluide.

Ensuite, nous verrons comment dupliquer ces symboles pour représenter différents continents et ajuster les valeurs en conséquence. L'utilisation des CSS pour gérer les transitions et les transformations sera expliquée en détail, vous permettant de créer des animations aussi précises qu'élégantes. Enfin, nous aborderons la gestion du timing des animations pour améliorer l'expérience utilisateur.

Voir plus
Questions réponses
Pourquoi est-il important de placer correctement les éléments lors de la création de symboles pour les animations en CSS?
Il est essentiel de placer correctement les éléments pour éviter des erreurs de dimension qui pourraient affecter la fluidité et l'efficacité des animations.
Quelle propriété CSS est utilisée pour convertir la hauteur d'un objet en pourcentage?
La propriété CSS utilisée pour convertir la hauteur d'un objet en pourcentage est 'height' avec la valeur '%' en remplacement de 'px'.
Comment pouvez-vous décaler les animations dans le temps pour éviter qu'elles ne se déclenchent toutes simultanément?
Pour décaler les animations dans le temps, vous pouvez utiliser les commandes de lecture automatique et ajuster l'option 'lecture auto' dans le scénario en déplaçant la tête de lecture.

Programme détaillé