Share
Au fur et à mesure de son déploiement sur le Web, CSS3 apporte de nouvelles techniques de présentation intéressantes. Aujourd'hui, nous allons passer en revue les bases de l'utilisation des transitions et des animations CSS3 pour ajouter une couche supplémentaire de finition..
Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.
Pour commencer, nous allons travailler avec quelques techniques de base - premièrement un simple changement de couleur du texte lorsqu'un utilisateur survole un élément spécifié.
a color: # 000; a: hover color: # f00;
Ici, nous changeons la couleur du texte en rouge en survol. Maintenant, avec un peu de CSS3, nous pouvons créer un look beaucoup plus lisse en atténuant progressivement la couleur.
a color: # 000; -webkit-transition: couleur 1 facile à installer; a: survol color: # f00;
Nous avons ajouté la propriété css, -webkit-transition. Notez que le préfixe -webkit spécifie que cela ne fonctionnera que dans les moteurs Webkit, ou dans Safari et Chrome. Heureusement, d'autres navigateurs modernes ont également leurs propres implémentations. Une déclaration complète couvrant tous les navigateurs pourrait ressembler à ce qui suit:
a color: # 000; -webkit-transition: couleur 1 facile à installer; -moz-transition: la couleur 1 s'installe facilement; -o-transition: la couleur 1 s'installe facilement; transition: la couleur 1 s'installe facilement;
Veuillez noter que, pour ce tutoriel, nous nous concentrerons exclusivement sur l'implémentation du webkit. Après la déclaration de la propriété, nous avons les valeurs «couleur 1s». Ceci est la déclaration abrégée; les trois valeurs représentent:
Dans ce cas, nous effectuons la transition en utilisant easy-in, qui commencera la transition lentement et s’accélérera rapidement..
Une autre utilisation de base des états changeants consiste à changer l’arrière-plan d’une zone de saisie active..
input.ourInputBox: focus -webkit-transition: couleur d'arrière-plan 0.5s linéaire; arrière-plan: #CCC;
Cette fois, nous plaçons la déclaration de transition dans l'état de survol, afin de ne pas ajouter de classes inutiles au CSS. Nous appliquons la transition une fois que la zone de saisie acquiert le focus.
Les transitions CSS sont relativement simples à ajouter aux fonctionnalités de survol existantes et donnent à votre site un raffinement supplémentaire pour les navigateurs prenant en charge CSS3..
Pour aller plus loin, nous pouvons également effectuer la transition de plusieurs propriétés CSS à l'aide des versions longues de la transition CSS3..
a.thebg color: # 000; fond: # f00; rembourrage: 5px; -webkit-border-radius: 5px; -webkit-transition-property: couleur, fond; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linéaire, facilité; a.thebg: hover color: # f00; arrière-plan: # 000;
Cette fois, l'arrière-plan et la couleur du texte changent en survol, de sorte que nous pouvons cibler ces deux propriétés avec notre transition. Nous divisons simplement la transition: nous avons d'abord -webkit-transition-property et séparons les différentes valeurs par une virgule. Nous ciblons donc les propriétés de couleur et d'arrière-plan, respectivement.
-webkit-transition-property: couleur, arrière-plan;
Ensuite, nous définissons la durée de la transition en utilisant:
-webkit-transition-duration: 1s, 1s;
Celles-ci sont référencées dans le même ordre que la première instruction; cette fois, cependant, les deux valeurs sont définies sur 1.
Enfin, nous définissons la fonction de synchronisation et définissons deux valeurs différentes: la première, linéaire, se rapporte à notre première variable déclarée - couleur; et la seconde se rapporte à l'arrière-plan variable.
Nous avons donc défini la couleur sur un changement linéaire en une seconde et l'arrière-plan de façon à ce qu'il soit plus facile pendant la même période..
Les transitions CSS3 commencent à prendre forme lorsqu'elles sont combinées avec d'autres nouvelles propriétés CSS.
Vous pouvez consulter des exemples d'utilisation d'éléments et de transitions qui se chevauchent dans Pour un site Web magnifique d'Andy Clarke..
Créons un exemple simple d'animation d'un signe de sortie.
Nous créons d'abord le cadre de sélection pour le poteau indicateur et lui donnons un contexte de positionnement relatif afin de nous permettre de positionner les éléments de manière absolue à l'intérieur de celui-ci..
#signpost width: 60px; hauteur: 196px; position: relative;
Maintenant, nous plaçons la boîte sur la page et y plaçons les morceaux de notre signe.
Ensuite, le poteau est positionné avec un z-index de deux, pour le placer au-dessus du signe.
#post width: 79px; hauteur: 196px; z-index: 2; position: relative;
Maintenant, nous ajoutons le signe, placé sous le message, et le faisons pivoter avec la propriété de transformation CSS3.
#sign height: 46px; largeur: 80px; position: absolue; Top 10; à gauche: 60; -webkit-transform-origin: 0 0; -webkit-transform: rotation (86deg); z-index: 1; -webkit-transition: -webkit-transform 0.5s easy-in-out;
Le signe est pivoté à l'aide de -webkit-transform: rotation (86deg) et est placé sous le poteau. Pour que le signe tourne autour du point approprié, nous devons changer le transformer l'origine dans le coin supérieur gauche: 0, 0.
Nous définissons la transition de manière à modifier la propriété -webkit-transform sur 0,5 seconde avec un profil d’entrée facile, puis en position de survol, nous retournons le signe à son orientation initiale..
#signpost: survolez #sign -webkit-transform: rotation (0deg);
Nous faisons cela sur le #signpost contenant: survol plutôt que sur le survol du #sign lui-même.
Nous pouvons maintenant relier tout cela ensemble, en utilisant des animations Webkit, qui nous donnent le pouvoir d'effectuer des tâches telles que la rotation continue..
Nous commençons par créer deux images de cercle et en les plaçant dans un div contenant - comme nous l’avons fait avec le poteau indicateur ci-dessus..
#circles width: 180px; hauteur: 180px; position: relative; .outercircle width: 180px; hauteur: 180px; position: absolue; z-index: 1; en haut: 0: à gauche: 0; .middlecircle width: 90px; hauteur: 90px; position: absolue; z-index: 3; en haut: 45px; à gauche: 45px;
Nous devons maintenant définir les animations. nous allons tourner les cercles dans des directions opposées, nous avons donc besoin de mettre en place deux animations.
@ -webkit-keyframes spin from -webkit-transform: rotation (0deg); to -webkit-transform: rotation (360deg); @ -webkit-keyframes spinrev de -webkit-transform: rotation (0deg); to -webkit-transform: rotation (-360deg);
L’animation reçoit un nom de référence, dans ce cas «spin» et «spinrev». Nous leur attribuons ensuite un à et de valeur; nous faisons donc pivoter l'image de 0 à 360 degrés à l'aide de la transformation webkit, et à -360 pour l'inverse.
Nous assignons maintenant cette animation aux états de survol. Notez que, si nous l’assignions à l’état normal, l’animation s’exécuterait immédiatement lorsque la page serait chargée..
#circles: survolez .outercircle -webkit-animation-name: spin; -webkit-animation-iteration-count: infini; -webkit-animation-timing-function: linéaire; -webkit-animation-duration: 10s; #circles: survolez .middlecircle -webkit-animation-name: spinrev; -webkit-animation-iteration-count: infini; -webkit-animation-timing-function: linéaire; -webkit-animation-duration: 5s;
Nous référons au nom de l'animation créé précédemment (-webkit-animation-name: spin;). Ensuite, nous déclarons le nombre de fois où nous souhaitons que l'animation s'exécute (-webkit-animation-iteration-count: infinite;). Dans ce cas, l'infini le maintiendra en rond pendant que la div #circles est survolé.
Nous définissons ensuite la fonction de synchronisation (-webkit-animation-timing-function: linear;), et enfin, nous fixons une durée pour chaque itération - dans ce cas, elle durera dix secondes (-webkit-animation-duration: 10s ;) et cinq pour une révolution complète.
Une fois que tout fonctionne, nous devrions considérer nos utilisateurs qui naviguent sans navigateur Web compatible CSS3. Ceci est facilement accompli en utilisant une bibliothèque JavaScript telle que Modernizr, qui ajoute des classes à l'élément HTML relatives aux capacités du navigateur..
À l'aide de l'exemple de panneau de signalisation ci-dessus, les navigateurs qui ne prennent pas en charge les transformations CSS ne placeront pas le signe correctement sous le message. afin que nous puissions cibler ces navigateurs et simplement cacher le signe jusqu'à ce qu'il soit survolé.
.no-csstransforms #signpost #sign display: none; .no-csstransforms #signpost: survolez #sign display: block;
C'est aussi simple que de créer un lien vers le script Modernizr, de trouver le nom de classe approprié, puis de créer une instruction CSS distincte pour cette instance..
C'est tout pour le moment. J'espère que tu as aimé! Faites-moi savoir si vous avez des questions / commentaires ci-dessous!
Accentsconagua