Vidéo: [TUTO] CRÉER DES ANIMATIONS CSS3 AVEC DREAMWEAVER 4/4 2025
Il peut être difficile d'obtenir une animation CSS3 correcte. Chaque développeur a différentes compétences et façons de voir les tâches. Stylie est conçu pour les développeurs qui sont plus orientés visuellement. Vous choisissez un point de départ et de fin pour l'animation, en utilisant les valeurs X et Y.
La valeur R détermine la quantité de rotation effectuée par l'objet animé. Vous pouvez choisir la durée de l'animation en utilisant les valeurs de temps. De plus, les valeurs X, Y et R peuvent chacune avoir un effet d'animation qui leur est associé.
De nombreuses animations se déplacent dans plus d'une direction. Cliquez sur le signe plus (+) pour ajouter une autre direction. Cette direction a également des valeurs X, Y et R et vous pouvez également définir sa durée et ses effets spéciaux. En bref, vous pouvez utiliser cette interface pour créer des effets d'animation incroyablement complexes qui vont dans plus d'une direction.
L'onglet Mouvement définit les caractéristiques de l'animation, telles que le nombre de fois que vous voulez que l'animation s'exécute (vous pouvez choisir de faire de l'exécution une boucle infinie) et comment l'objet que vous animez devrait interagir avec le chemin d'animation.
C'est également l'onglet que vous utilisez pour définir l'accélération utilisée pour que l'animation soit fluide. Une animation en ligne droite est simple, mais l'accélération devient importante lorsque vous commencez à travailler avec des animations qui se déplacent dans plusieurs directions.
Une fois la configuration de votre animation terminée, vous cliquez sur l'onglet CSS, qui contient le CSS que vous utilisez pour créer l'effet animé dans votre application. L'onglet CSS vous permet de choisir un nom pour la classe d'animation. Vous pouvez également sélectionner les fournisseurs à inclure dans le CSS et le niveau de qualité de l'animation.
L'onglet HTML contient des exemples de tags dont vous avez besoin pour compléter l'animation. C'est ici que vous devez apporter des modifications pour inclure l'objet que vous voulez animer à la place du cercle simple fourni par Stylie.
