Comment utiliser CSS3 animation de transition

category Ordinateurs et logiciels / Programmation / Html

Il est déjà possible de modifier les propriétés de CSS à la volée par les pseudo-classes (comme hover) ou avec du code javascript. Avant de CSS3, tous les changements d'état de CSS est passé instantanément. Avec la nouvelle transition attribut, vous pouvez provoquer des transitions se produisent au fil du temps.

image0.jpg

Regardez un titre h1 simple:

Transition Démo

Le code CSS est essentiellement assez simple:

 h1 {color: black font-size: 300% - transition: 1s de couleur facilitent-in-} h1: hover {color: rouges}

Commencez par en ignorant le transition attribuer. Si vous regardez le reste du code, il est facile de voir ce qu'il fait. A l'état normal, le titre est noir. Dans l'état stationnaire, la couleur est rouge. Typiquement, le titre devient rouge dès que la souris survole, et transforme instantanément noir lorsque les feuilles de souris.

Toutefois, lorsque le transition attribut est ajouté, le changement de couleur est pas immédiate, mais prend une seconde. La couleur change progressivement du noir au rouge et à l'arrière.




Les transitions sont encore plus intéressant quand vous les jumeler avec des transformations. Imaginez un très simple div:

Box 1

Appliquer un peu de magie de CSS3 et lorsque l'utilisateur survole le div, il tourne librement jusqu'à ce qu'il soit à l'envers. Lorsque l'utilisateur quitte le div, il tourne en douceur à sa position d'origine:

 #box {transition: tous 1s facilité in- hauteur: 100px; width: 100px; border: 1px noir solide} #box: hover {transform: rotation (180 °) -}

La transformer est défini dans l': flotter pseudo-classe. Le seul élément nouveau est la transition spécifiée dans le style classique de la classe.

La transition attribut prend plusieurs paramètres:

  • propriété d'animation: Le type d'animation défini par cette balise. La valeur par défaut est tous, mais d'autres types sont appelés à travailler, y compris couleur, longueur, largeur, Fachverband der chemischen, opacité, et nombre. En cas de doute, utilisez la norme tous.

  • durée: La longueur de l'animation en secondes. Une seconde est 1s.

  • fonction de chronométrage: Si vous souhaitez que l'animation se produit à une vitesse constante, utilisez. Si vous voulez un mouvement plus naturel qui accélère progressivement et ralentit aux extrémités de l'animation, utilisez l'une des options suivantes: facilité, servitudesdans, facilité sur, facilité in-out.

  • retard: Si vous incluez une seconde valeur de temps, cela sera considéré comme un retard. L'animation ne commencera qu'après le retard.

Si vous préférez, vous pouvez utiliser les propriétés individuelles pour les différentes parties de l'animation, mais la plupart développeur préfèrent le raccourci d'une ligne (comme celui utilisé pour les frontières).

Pas tous les attributs CSS peuvent être animés, mais beaucoup peuvent être. Elle peut exiger un peu d'expérimentation pour déterminer quels attributs CSS peuvent être animés avec le transition attribuer.

Malheureusement, le stock transition attribut est pas pris en charge par tous les principaux navigateurs, mais il existe des versions spécifiques au fournisseur pour Mozilla (-moz-), WebKit (-webkit) Et Opera (-o-). Votre meilleur pari jusqu'à ce soutien est très répandue consiste à inclure toutes les versions spécifiques au fournisseur, en plus de la version standard.

Articles Similaires

A propos Auteur
Comment utiliser des animations CSS3 Comment utiliser des animations CSS3

La transformer comportement est assez cool, mais CSS3 promet une forme encore plus excitant de l'animation appelé (wait for it) Animation mécanisme. Voici une animation d'une boîte déplacer autour de l'écran.Voici la stratégie de base pour la…

Comment utiliser des transformations CSS3 Comment utiliser des transformations CSS3

CSS3 inclut la capacité à appliquer des transformations géométriques sur tout élément dans votre page Web HTML5. Cela fournit un niveau remarquable de contrôle visuel pas disponibles auparavant pour les développeurs web.La transformer…

Comment utiliser les classes de transition dans javafx Comment utiliser les classes de transition dans javafx

JavaFX est livré avec huit effets d'animation prédéfinis - surnommé classes de transition - que vous pouvez utiliser pour créer facilement une animation sur la plupart des noeud dans votre graphe de scène. (La plupart des transitions allons…

Comment créer une animation avec Google SketchUp 8 Comment créer une animation avec Google SketchUp 8

Quel est si grande sur l'exportation de l'animation dans Google SketchUp est de savoir comment facile il est à faire. La clé pour des animations exportateurs de vos modèles SketchUp utilise scènes. Les scènes sont enregistrées vues de votre…

Pour les aînés: comment ajouter des transitions à une diapositive PowerPoint Pour les aînés: comment ajouter des transitions à une diapositive PowerPoint

Les effets de transition sont un peu comme des animations, sauf qu'ils appliquent aux diapositives PowerPoint entières. Un effet de transition est la fanfare qui se produit lorsque vous transition entre une diapositive à l'autre. L'effet de…

Comment créer des animations CSS3 avec Stylie Comment créer des animations CSS3 avec Stylie

Obtenir une animation CSS3 juste peut être difficile. Chaque développeur a des compétences différentes et des façons de tâches d'observation. Stylie est conçu pour les développeurs qui sont plus orientés visuellement. Vous choisissez un…

Comment employer des transitions de classe avec jQuery UI effets spéciaux en CSS3 Comment employer des transitions de classe avec jQuery UI effets spéciaux en CSS3

Utilisation des classes de CSS3 peut avoir un effet intéressant sur la présentation des informations à l'écran. jQuery UI permet d'utiliser des classes CSS pour réaliser des animations de quatre manières différentes:Ajout d'une classeRetrait…

Comment faire la transition avec CSS3 Comment faire la transition avec CSS3

Parlez de puissantes nouvelles fonctionnalités dans des feuilles de style en cascade (CSS): En associant le : hover pseudo-classe avec la propriété de transition CSS3, vous pouvez ajouter des fonctionnalités interactives slicks à vos objets…

Comment travailler avec les modules CSS3 Comment travailler avec les modules CSS3

Pour plus de simplicité, les modules CSS3 peuvent être séparés en dix catégories: en bordures, des fonds, des polices, effets de texte, plusieurs colonnes, des transitions, des transitions 2D, transitions 3D, des animations et l'interface…

Comment créer des animations avec des images clés Comment créer des animations avec des images clés

Pour créer des effets animés sur votre site Web à afficher sur l'iPad et l'iPhone, vous devez utiliser des images clés. Plus complexe CSS 3 animations comptent sur les images clés. Les images-clés sont les points dans une animation où quelque…

Comment créer des transitions avec CSS 3 Comment créer des transitions avec CSS 3

CSS 3 vous donne de nombreuses fonctionnalités intéressantes pour créer des effets sympas dans la conception de votre site Web pour l'affichage sur l'iPad et l'iPhone. Les propriétés CSS 3 de transition permettent de modifier l'état d'un…

Assurez CSS 3 travailler dans d'autres navigateurs web Assurez CSS 3 travailler dans d'autres navigateurs web

Si vous souhaitez utiliser HTML5 et CSS 3 dans la conception de votre site Web, vous devez savoir que les deux HTML5 et CSS 3 sont encore en cours de développement. La spécification CSS n'a pas encore été approuvé par le W3C, mais de nombreux…

Effets que vous pouvez faire avec des feuilles de style en cascade Effets que vous pouvez faire avec des feuilles de style en cascade

CSS3, la dernière édition de Cascading Style Sheets, présente les progrès dans le traitement de conception. Parmi ceux-ci, quelques nouvelles fonctionnalités qui définissent des dégradés de couleurs, degrés de transparence, et même des…

Comment ajouter des transitions à votre projet iMovie 09 Comment ajouter des transitions à votre projet iMovie 09

iMovie 09 vous permet d'ajouter des transitions à vos projets iMovie. iMovie comprend une étonnante palette de transitions, y compris les vieux favoris (comme Fade In et dissoudre) et des trucs astucieux vous pourriez ne pas être familier avec…

» » » » Comment utiliser CSS3 animation de transition