transition
Une transition de base impliquant des propriétés CSS consiste à définir et à déplacer un élément de son état de repos (par exemple, un arrière-plan bleu foncé) vers son état de survol ou actif (par exemple, un arrière-plan bleu clair).
Les transformations peuvent être utilisées avec des transformations (ainsi que pour déclencher des événements tels que :hover ou :focus) pour créer des animations. Estompez une couleur d'arrière-plan, faites glisser un élément et faites pivoter un objet, le tout avec des transitions CSS.
Voici le contenu cité : #nav a{ couleur d'arrière-plan : rouge ; |
Quelques paramètres à convertir
propriété de transition
Spécifiez le nom de la propriété CSS pour la transformation. Par exemple, dans l'exemple ci-dessus, la transformation est appliquée à la propriété background-color.
durée de transition
Définir le temps nécessaire à la conversion (le temps nécessaire pour passer de l'ancien attribut au nouvel attribut)
fonction de synchronisation de transition
Peut être compris comme un effet excessif. Spécifie la valeur intermédiaire lors de la conversion. Peut être spécifié avec cubique-bézier. Il existe bien sûr plusieurs valeurs intégrées couramment utilisées : easy |
délai de transition
C'est plus facile à comprendre, c'est le délai de conversion. Le temps peut être un entier positif, un entier négatif ou zéro. Lorsqu'il est différent de zéro, l'unité doit être définie sur s (secondes) ou ms (millisecondes). Lorsqu'il s'agit d'un nombre négatif, l'action convertie sera affichée à partir de. à ce moment-là, et l'action précédente sera tronquée.
Remarque : La partie paramètre a été ajoutée lors de la traduction et ne figure pas dans le texte original.
Prise en charge du navigateur
Aussi cool que l'attribut transform, mais actuellement uniquement pris en charge par les navigateurs WebKit. -moz-transition est déjà disponible dans les récentes versions nocturnes de Firefox 3.7. Vous pouvez également ajouter -moz-transition à votre CSS pour des améliorations futures. Vous pouvez même ajouter une propriété sans le préfixe privé, juste au cas où.
Animation
L'animation est l'endroit où CSS 3 est le plus utile. Vous pouvez combiner tous les éléments dont nous avons discuté ci-dessus avec des propriétés d'animation telles que la durée d'animation, le nom de l'animation et la fonction de synchronisation d'animation pour créer des effets comme les animations Flash - du CSS pur.
Adresse vidéo : http://www.tudou.com/programs/view/YeTPctOy2mo
Voici le contenu cité : #faire pivoter { |
Ce fantastique code d'animation CSS et cette démo en ligne peuvent être vus sur le site Web du kit . La démo peut être vue sur n'importe quel site Web, mais l'effet d'animation n'est visible que sur la version nocturne de WebKit sur Mac OS (Snow Leopard). Cela ressemble à la vidéo ci-dessus, et si vous êtes sous Mac OS (version Snow Leopard), je pense que cela vaut la peine d'installer un webkit pour voir l'effet par vous-même (c'est vraiment cool). Les utilisateurs du système Windows sont temporairement incapables d'apprécier cet effet.
Quelques paramètres d'animation
Les paramètres de l'animation sont quelque peu similaires à ceux de la traduction, donc si vous comprenez les paramètres de la traduction, ce n'est pas difficile à comprendre ici.
nom-animation
Le nom de l'animation.
durée de l'animation
Définissez le temps requis pour que l'animation soit jouée une fois. La valeur par défaut est 0 ;
fonction de synchronisation d'animation
Définissez la façon dont l'animation est jouée. Les paramètres sont similaires à la fonction de synchronisation de transition.
délai d'animation
Définir quand l'animation démarre
nombre d'itérations d'animation
Définissez le nombre de boucles, infini signifie des temps illimités. La valeur par défaut est 1.
-webkit-animation-direction
La direction de lecture de l'animation, deux valeurs, la valeur par défaut est normale. À ce moment, chaque cycle d'animation sera lu vers l'avant. L'autre valeur est alternative, alors les heures paires seront lues vers l'avant et les heures impaires seront lues dans le sens inverse.
Prise en charge du navigateur
Malheureusement, actuellement, seuls quelques navigateurs prennent en charge les animations CSS. Les animations CSS 2D fonctionnent dans Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira et d'autres navigateurs Webkit. Safari 4 (Snow Leopard) prend en charge l'animation 3D.