Deux outils principaux sont souvent utilisés pour la mise en page : positionnement Et libre circulation (flottant). Le positionnement CSS vous permet de spécifier où la boîte d'un élément apparaît, et le flottement libre déplace les éléments vers le bord gauche ou droit de la boîte du conteneur, permettant au reste du contenu de « circuler » autour d'elle.
Positionnement et libre circulation des éléments
1. Types de positionnement
La propriété position vous permet de spécifier précisément le nouvel emplacement du bloc par rapport à l'endroit où il se trouverait dans le flux normal du document. Par défaut, tous les éléments sont disposés séquentiellement les uns après les autres dans l'ordre dans lequel ils sont définis dans la structure du document HTML. La propriété n'est pas héritée.
| position | |
|---|---|
| Signification: | |
| statique | La valeur par défaut signifie aucun positionnement. Les éléments sont affichés séquentiellement les uns après les autres dans l'ordre dans lequel ils sont définis dans le document HTML. Utilisé pour effacer toute autre valeur de positionnement. |
| relatif | Un élément positionné relativement est déplacé de sa position normale dans différentes directions par rapport aux limites de son conteneur parent, mais l'espace qu'il occupait ne disparaît pas. Cependant, un tel élément peut chevaucher d'autres contenus de la page. Si, pour un élément relativement positionné, vous définissez les propriétés haut et bas ou gauche et droite en même temps, alors dans le premier cas, seul le haut fonctionnera, dans le second, à gauche. Positionnement relatif vous permet de définir le z-index d'un élément, ainsi que de positionner de manière absolue les éléments enfants dans un bloc. |
| absolu | Un élément positionné de manière absolue est complètement supprimé du flux de documents et positionné par rapport aux limites de son bloc conteneur (un autre élément ou une fenêtre de navigateur). Le bloc conteneur d'un élément en position absolue est l'élément ancêtre le plus proche dont la valeur de la propriété position n'est pas statique. L'emplacement des bords de l'élément est déterminé à l'aide des propriétés de décalage. L'espace occupé par un tel élément s'effondre comme si l'élément n'existait pas sur la page. Un élément positionné de manière absolue peut chevaucher ou être remplacé par d'autres éléments (en raison de Propriétés de l'index z). Tout élément positionné de manière absolue génère un bloc, c'est-à-dire qu'il prend la valeur display : block ; . |
| fixé | Corrige un élément à un emplacement spécifié sur la page. Le bloc conteneur d'un élément fixe est la fenêtre d'affichage, c'est-à-dire que l'élément est toujours fixe par rapport à la fenêtre du navigateur et ne change pas de position lors du défilement de la page. L'élément lui-même est complètement supprimé du flux de documents principal et créé dans un nouveau flux de documents. |
| initial | Définit la valeur de la propriété sur la valeur par défaut. |
| hériter | Hérite de la valeur de propriété de l'élément parent. |
Riz. 1. Différence entre positionnement statique, relatif et absolu 2. Propriétés de décalage
Les propriétés décrivent le décalage par rapport au côté le plus proche du bloc conteneur. Défini pour les éléments pour lesquels la valeur de la propriété position n'est pas statique . Ils peuvent prendre des valeurs positives et négatives. Pas hérité.
Pour la propriété top, les valeurs positives déplacent le bord supérieur de l'élément positionné ci-dessous et les valeurs négatives déplacent le bord supérieur de son bloc conteneur. Pour la propriété left, les valeurs positives déplacent le bord de l'élément positionné vers la droite et les valeurs négatives déplacent le bord de l'élément positionné vers la gauche. Autrement dit, les valeurs positives déplacent l'élément à l'intérieur du bloc conteneur et les valeurs négatives le déplacent à l'extérieur.
3. Positionnement au sein d'un élément
Pour un bloc conteneur d'un élément positionné de manière absolue, il est précisé propriété de position: relatif sans décalages. Cela permet aux éléments d'être positionnés dans un élément conteneur.
Riz. 2. Positionnement relatif absolu4. Problèmes de positionnement
1. Si la largeur ou la hauteur d'un élément en position absolue est définie sur auto , alors sa valeur sera déterminée par la largeur ou la hauteur du contenu de l'élément. Si la largeur ou la hauteur est déclarée explicitement, alors c'est la valeur qui sera attribuée.
2. Si à l'intérieur d'un bloc avec position : absolue il y a des éléments pour lesquels le flotteur est défini, alors la hauteur de cet élément sera égale à la hauteur du plus haut de ces éléments.
3. Pour un élément avec position : absolue ou position : fixe, vous ne pouvez pas définir simultanément la propriété float, mais pour un élément avec position : relative, vous le pouvez.
4. Si l'ancêtre de l'élément positionné est un élément bloc, alors le conteneur de blocs est formé par la zone de contenu délimitée par la bordure. Si l'ancêtre est un élément en ligne, le bloc conteneur est formé par la limite extérieure de son contenu. S'il n'y a pas d'ancêtre, le bloc conteneur est l'élément body.
5. Libre circulation des éléments
Dans l'ordre normal, les éléments de bloc sont rendus en commençant par le bord supérieur de la fenêtre du navigateur et en allant vers le bord inférieur. La propriété float vous permet de déplacer n'importe quel élément, en l'alignant sur le bord gauche ou droit de la page Web ou sur l'élément conteneur qui le contient. Dans ce cas, les autres éléments de bloc l'ignoreront et les éléments en ligne se déplaceront vers la droite ou la gauche, libérant ainsi de l'espace et circulant autour de lui.
Riz. 3. Libre circulation des éléments Un bloc flottant prend les dimensions de son contenu en tenant compte du remplissage et des bordures. Les marges supérieure et inférieure des éléments flottants ne s'effondrent pas. La propriété float s'applique à la fois aux éléments de bloc et aux éléments en ligne.
Le bord extérieur gauche ou droit d'un élément déplacé, contrairement aux éléments positionnés, ne peut pas être situé à gauche (ou à droite) du bord intérieur de son bloc conteneur, c'est-à-dire dépasser ses frontières. De plus, si un remplissage interne est spécifié pour le bloc conteneur, alors le bloc flottant sera espacé du bord du bloc conteneur à la distance spécifiée.
La propriété modifie automatiquement la valeur calculée (affichée par le navigateur) de la propriété display en display: block pour les valeurs suivantes : inline , inline-block , table-row , table-row-group , table-column , table-column-group , cellule-tableau .légende-tableau, groupe-en-tête-tableau, groupe-pied-de-page-tableau. La valeur de inline-table devient table .
La propriété n'a aucun effet sur les éléments avec display: flex et display: inline-flex .
Lors de l'utilisation de la propriété float pour éléments de bloc Assurez-vous de définir la largeur. Cela créera de l'espace pour d'autres contenus dans le navigateur. Mais si la largeur combinée de toutes les colonnes est supérieure à l’espace disponible, alors le dernier élément descendra.
Dans le même temps, les marges verticales des éléments flottants ne s'effondrent pas avec les marges des éléments voisins, contrairement aux éléments de bloc ordinaires.
6. Annuler le flux autour des éléments
6.1. propriété claire
La propriété clear détermine comment l'élément qui suit l'élément flottant sera positionné. La propriété annule le flotteur sur un ou les deux côtés de l'élément défini par la propriété float. Pour empêcher l'affichage de l'arrière-plan ou des bordures sous les éléments flottants, utilisez la règle (overflow: Hidden;).
6.2. Nettoyer un flux avec des styles en utilisant la classe clearfix et la pseudo-classe :after
Supposons que vous disposiez d’un conteneur de blocs dont la largeur et la hauteur ne sont pas spécifiées. Un bloc flottant aux dimensions spécifiées est placé à l’intérieur.
Riz. 4. « Effet d'effondrement » du bloc conteneurSolution au problème:
Nous créons la classe .clearfix et, en combinaison avec la pseudo-classe :after, l'appliquons au bloc conteneur.
Deuxième option pour effacer le flux :
Clearfix:after ( contenu : " " ; affichage : tableau ; effacer : les deux ; ) 
Riz. 5. Application de la méthode « nettoyage » à un bloc conteneur contenant un élément flottant
6.3. Un moyen simple de nettoyer un flux
Il existe une autre astuce pour nettoyer le flux d'un élément contenant des éléments flottants, comme une liste à puces horizontale :
Ul (marge : 0 ; style de liste : aucun ; remplissage : 20 px ; arrière-plan : #e7e6d4 ; débordement : auto; ) li ( float : gauche ; largeur : calc(100 % / 3 - 20px); hauteur : 50 px ; marge- droite : 20 px ; arrière-plan : #ffffff ; bordure : 3 px en pointillés #666666 ; ) li:last-child (marge-droite : 0 ;) Fig. 6. Nettoyer le flux de liste horizontal
- Traduction
Bonjour, cher ami Habra ! Il existe de nombreux exemples en ligne d'utilisations intéressantes des transformations et des transitions en CSS3. Dans cet article, nous passerons en revue les bases de CSS3 et apprendrons comment créer quelque chose comme ceci. Ce tutoriel sera utile à ceux qui viennent de commencer à se familiariser avec CSS3. Commençons!
Système de coordonnées
Pour mieux comprendre le fonctionnement du mouvement d'un objet, nous travaillerons dans un système de coordonnées.
Cependant, notre système de coordonnées présente une particularité : l’axe Y est orienté dans la direction opposée à celle habituelle. Pourquoi? Le fait est que HTML et CSS (ainsi que, par exemple, ActionScript) utilisent un système de coordonnées inverse, puisque la page Web commence à gauche. coin supérieur et descend.
La note: Nous supposerons que vous connaissez déjà Structure HTML et CSS. Je n'expliquerai pas comment personnaliser le fichier CSS, comment placer des images, etc. Nous nous concentrerons sur l’animation des images. Si vous n'êtes pas sûr de vos compétences haut niveau, alors nous vous recommandons de consulter le cours « HTML et CSS en 30 jours » (gratuit et payant) langue anglaise) pour apprendre tout ce dont vous avez besoin.
1 : Mouvement horizontal
Le premier mouvement que nous démontrerons est horizontal. Nous déplacerons les objets de gauche à droite et de droite à gauche.Se déplacer vers la droite
Pour déplacer un objet, nous utiliserons transformer : traduire (x, y), où X est un nombre positif et Y=0.
HTML
Ouvrez votre éditeur de code préféré et saisissez ce qui suit :
Nous avons défini trois classes pour l'image :
- objet : Établir les règles de base de notre objet.
- van : Nous utiliserons différents objets pour démontrer chaque type d'animation.
- move-right : En utilisant cette classe, nous déplacerons notre objet.
Tout d’abord, nous placerons notre objet (l’image du camion) au centre.
.object ( position : absolue ; ) .van ( haut : 45 % ; gauche : 44 % ; )
Dans cet exemple, nous déplacerons l'objet de 350 pixels vers la droite. Syntaxe utilisée transformer : traduire (350px,0);. De plus, l'objet ne bougera que lorsque vous le survolerez : #axis: survolez .move-right.
#axis:hover .move-right( transform: traduire(350px,0); -webkit-transform: traduire(350px,0); /** Chrome et Safari **/ -o-transform: traduire(350px,0) ; /** Opera **/ -moz-transform: traduire(350px,0); /** Firefox **/ )
Paramètre transformer déplacera simplement l'objet d'un point à un autre, mais ne créera pas d'animation mouvement donné. Pour résoudre ce problème, vous devez ajouter un paramètre de déplacement à class.object.
Objet ( position : absolue ; transition : entrée-sortie facile pour tous les 2 ; -webkit-transition : entrée-sortie facile pour tous les 2 ; /** Chrome et Safari **/ -moz-transition : entrée-sortie facile pour tous les 2 ; /** Firefox **/ -o-transition : tous les 2 sont faciles à entrer et à sortir ; /** Opera **/ )
Cette règle de déplacement indiquera au navigateur d'animer Tous paramètres d'objet sur 2 secondes(sans délai) en utilisant la fonction facilité d'entrée et de sortie.
Nous pouvons utiliser 6 fonctions de synchronisation de mouvement différentes :
- linéaire: le mouvement se produit vitesse constante du début à la fin.
- facilité: Le mouvement démarre lentement puis s'accélère.
- facilité dans: Le mouvement commence lentement.
- facilité: Le mouvement se termine lentement.
- facilité d'entrée et de sortie: Le mouvement commence et se termine lentement.
- bézier cubique: définition manuelle valeurs de déplacement.
Se déplacer vers la gauche
Pour déplacer un objet vers la gauche, il suffit de mettre une valeur négative sur l'axe OH, alors que Oui reste inchangé. Dans notre cas, nous déplacerons l'objet vers - 350pxÀ gauche.
HTML
Créer nouveau document html et collez le code suivant :
Cette fois, nous utilisons la classe se déplacer à gauche pour déplacer l'objet vers la gauche.
CSS
Entrons maintenant -350px pour l'axe OX. transformer : traduire (-350px,0);- déplacez l'objet vers la gauche.
#axis:hover .move-left ( transform: traduire(-350px,0); -webkit-transform: traduire(-350px,0); /** Safari et Chrome **/ -o-transform: traduire(-350px ,0); /** Opera **/ -moz-transform: traduire(-350px,0); /** Firefox **/ )
Puisque nous avons déjà défini les règles de déplacement plus tôt, nous n'avons pas besoin de le refaire.
2 : Mouvement vertical
Déplacer un objet verticalement ne sera pas difficile, car il est identique à l'objet horizontal. La seule différence est que nous utiliserons la valeur -y pour progresser et valoriser oui pour descendre.Monter
HTML
Le modèle HTML est identique aux exemples précédents. Cependant, nous remplacerons notre objet par une fusée (pour plus de clarté) et lui attribuerons une classe de progression.
CSS
Tout comme le camion, nous placerons la fusée au centre :
.rocket ( haut : 43 % ; gauche : 44 % ; )
Comme nous l'avons noté précédemment, la coordonnée Y doit être négative. Dans notre cas, nous déplacerons l'objet de 350 pixels vers le haut.
#axis:hover .move-up ( transform: traduire(0,-350px); -webkit-transform: traduire(0,-350px); -o-transform: traduire(0,-350px); -moz-transform : traduire(0,-350px); )
Descendons
Comme vous l'avez peut-être deviné, pour déplacer un objet vers le bas, la coordonnée Y doit être positive et la coordonnée X doit être 0. Syntaxe : traduire(0,y);
HTML
CSS
#axis:hover .move-down ( transform: traduire(0,350px); -webkit-transform: traduire(0,350px); -o-transform: traduire(0,350px); -moz-transform: traduire(0,350px); )
3 : Mouvement diagonal
Pour déplacer un objet en diagonale, nous combinerons les paramètres X Et oui. La syntaxe sera la suivante : transformer : traduire (x, y). Selon la direction, la valeur X Et oui peut être positif ou négatif.
HTML
CSS
#axis:hover .move-ne ( transform: traduire(350px,-350px); -webkit-transform: traduire(350px,-350px); -o-transform: traduire(350px,-350px); -moz-transform : traduire(350px,-350px); )
4 : Rotation
La rotation en CSS3 est contrôlée par des coordonnées en degrés (de 0° à 360°). Pour faire pivoter un objet, appliquez les options suivantes : transformation : rotation (ndeg); Où n- degrés.
Rotation horaire
Pour faire pivoter un objet dans le sens des aiguilles d'une montre, appliquez une valeur positive à faire pivoter (ndeg).HTML
CSS
#axis:hover .rotate360cw ( transformation : rotation (360deg); -webkit-transform: rotation (360deg); -o-transform: rotation (360deg); -moz-transform: rotation (360deg); )
Rotation antihoraire
Pour faire pivoter un objet dans le sens inverse des aiguilles d'une montre, appliquez une valeur négative à faire pivoter (ndeg).
HTML
CSS
#axis:hover .rotate360ccw ( transformation : rotation (-360deg); -webkit-transform: rotation (-360deg); -o-transform: rotation (-360deg); -moz-transform: rotation (-360deg); )
5 : Mise à l’échelle
La mise à l'échelle est une fonctionnalité intéressante de CSS3. Utilisation du paramètre échelle(n) ou paramètre échelle (x, y), nous pouvons augmenter ou diminuer l'objet directement dans le HTML. L'objet changera de taille en fonction de la valeur de n/x,y, où l'axe X est la largeur et l'axe Y est la hauteur.Regardons l'exemple suivant.
CSS3 nous a permis de créer de nombreux nouveaux effets sans recourir aux bibliothèques JavaScript. Dans cet article, je vais vous expliquer comment implémenter une apparence fluide de n'importe quel élément en utilisant CSS3.
Regardons un exemple
Disons que nous avons deux blocs identiques. DANS balisage HTML Je suggère de les étiqueter comme ceci :
Chaque élément a reçu deux classes de style. Pourquoi est-ce nécessaire ? En première classe, nous demanderons règles générales apparence, les blocs sont les mêmes, ils peuvent donc être décrits ensemble. DANS exemple réel, très probablement, ce sera différent. De plus, chaque élément a reçu son propre cours de style. Cela sera également utile.
Bloc (taille de police : 50 px ; largeur : 200 px ; hauteur : 120 px ; arrière-plan : vert ; marge inférieure : 30 px ; transition : 1 s )
Avec ces règles, nous avons attribué la même chose aux deux blocs apparence: hauteur, largeur, taille de police, remplissage et fond vert. La dernière propriété de transition est relativement nouvelle et est incluse dans la version CSS3. Il désigne un délai après lequel certaines règles sont exécutées. Essentiellement, c’est ce qui donne un aspect lisse.
Dans l'exemple j'ai défini 1 seconde, vous pouvez en définir plus ou moins si vous le souhaitez. Une fois que vous voyez la propriété en action, vous pouvez ajuster vous-même sa valeur.
Comment implémenter le fondu entrant en CSS3 ?
Ensuite, il y a deux options. Disons que nous devons masquer le deuxième bloc pour le moment et l'afficher en douceur lorsque nous survolons le premier. La règle la plus couramment utilisée pour masquer un élément est display: none , mais elle ne donnera pas exactement ce que vous voulez : une apparence fluide. L'élément apparaîtra brusquement.
Nous ferons donc les choses différemment. Voir ce code :
Block2( opacité : 0 ; ) .block1:hover + .block2( opacité : 1 )
Nous avons utilisé une autre propriété CSS3 : l'opacité. Il spécifie la transparence de l'élément, qui va de 0 (entièrement transparent) à 1 (entièrement opaque).
Tout d'abord, nous retirons complètement le deuxième bloc des yeux, le rendant transparent. Nous devons maintenant nous assurer que lorsque vous passez la souris sur le premier bloc, le second apparaît en douceur. Pour cela, un sélecteur combiné intéressant est utilisé : block1:hover + .block2
Autrement dit, le changement de style lui-même se produit lorsque vous survolez le premier bloc et le second change directement. Grâce à la transition définie précédemment, elle n'apparaîtra pas brusquement, mais en douceur, ce dont nous avons besoin. En modifiant la valeur de transition, vous pouvez rendre l'apparence plus nette ou, au contraire, la ralentir encore plus.
Animations CSS3 Donne du dynamisme aux sites. Il donne vie aux pages Web et améliore l'expérience utilisateur. Contrairement aux transitions CSS3, la création d'animation est basée sur des images clés, qui permettent de lire et de répéter automatiquement les effets pendant un temps donné, ainsi que d'arrêter l'animation au sein d'une boucle.
L'animation CSS3 peut être utilisée pour presque tous les éléments HTML, ainsi que pour les pseudo-éléments :before et :after. La liste des propriétés animées est donnée sur la page. Lors de la création d'une animation, n'oubliez pas problèmes possibles avec des performances, car changer certaines propriétés nécessite beaucoup de ressources.
Introduction à l'animation CSS
Prise en charge du navigateur
C'EST À DIRE: 10.0
Firefox : 16,0, 5,0 -moz-
Chrome: 43.0, 4.0 -kit Web-
Safari: 4.0 -kit Web-
Opéra: 12.1, 12.0 -o-
iOS-Safari : 9, 7.1 -kit Web-
Opéra Mini : —
Navigateur Android : 44, 4.1 -kit Web-
Chrome Pour Android: 44
1. Règle @keyframes
La création d'animation commence par l'installation images clés Règles @keyframes. Les images déterminent quelles propriétés seront animées à quelle étape. Chaque cadre peut inclure un ou plusieurs blocs de déclaration d'une ou plusieurs paires de propriétés et de valeurs. La règle @keyframes contient le nom de l'animation de l'élément, qui relie la règle et le bloc de déclaration de l'élément.
@keyframes shadow ( de (text-shadow : 0 0 3px black ;) 50 % (text-shadow : 0 0 30px black ;) à (text-shadow : 0 0 3px black ;) )
Les images clés sont créées à l'aide mots clés de et vers (équivalent aux valeurs 0% et 100%) ou en utilisant des points de pourcentage, qui peuvent être définis autant que vous le souhaitez. Vous pouvez également combiner des mots-clés et des points de pourcentage. Si les frames ont les mêmes propriétés et valeurs, ils peuvent être combinés en une seule déclaration :
@keyframes se déplace ( de, vers ( haut : 0 ; gauche : 0 ; ) 25 %, 75 % (haut : 100 % ;) 50 % (haut : 50 % ;) )
Si les images 0 % ou 100 % ne sont pas spécifiées, le navigateur de l'utilisateur les crée en utilisant les valeurs calculées (initialement définies) de la propriété animée. Si deux images clés ont les mêmes sélecteurs, la suivante annulera la précédente.
Une fois la règle @keyframes déclarée, on peut la référencer dans la propriété animation :
H1 (taille de police : 3,5em ; couleur : magenta foncé ; animation : facilité d'entrée et de sortie infinie de shadow 2s ; )
Il n'est pas recommandé d'animer des valeurs non numériques (à de rares exceptions près), car le résultat dans le navigateur peut être imprévisible. Vous ne devez pas non plus créer d'images clés pour les valeurs de propriété qui n'ont pas de point médian, telles que les valeurs de propriété color: pink et color: #ffffff , width: auto et width: 100px , ou border-radius: 0 et border- rayon : 50 % (dans ce cas, il serait correct de préciser border-radius : 0 %).
2. Nom de l'animation nom-animation
La propriété spécifie le nom de l'animation. Le nom de l'animation est créé dans la règle @keyframes. Il est recommandé d'utiliser un nom qui reflète l'essence de l'animation, et vous pouvez utiliser un ou plusieurs mots liés entre eux à l'aide d'un espace - ou d'un symbole. souligner _ . La propriété n'est pas héritée.
Syntaxe
Div (nom de l'animation : mymove ;)
3. Durée de l'animation animation-durée
La propriété définit la durée de l'animation, définie en secondes ou en millisecondes, les valeurs négatives ne sont pas autorisées. Pas hérité. Si plusieurs animations sont spécifiées pour un élément, vous pouvez définir temps différent pour chacun, listant les valeurs séparées par des virgules.
Syntaxe
Div (animation-durée : 2s ;)
4. Fonction de synchronisation animation-fonction de synchronisation
La propriété définit le changement de vitesse du début à la fin de l'animation à l'aide de fonctions de timing. Spécifié à l'aide de mots-clés ou d'une courbe de Bézier cubique-bezier(x1, y1, x2, y2) . Pas hérité.
| fonction de synchronisation d'animation | |
|---|---|
| Valeurs: | |
| facilité | Fonctionnalité par défaut, l'animation démarre lentement, accélère rapidement et ralentit à la fin. Correspond à cubique-bézier(0.25,0.1,0.25,1) . |
| linéaire | L'animation se déroule uniformément tout au long du temps, sans fluctuations de vitesse. Correspond à cubique-bézier(0,0,1,1) . |
| facilité dans | L'animation démarre lentement puis s'accélère doucement à la fin. Correspond à cubique-bézier(0.42,0,1,1) . |
| facilité | L'animation démarre rapidement et ralentit doucement à la fin. Correspond à cubique-bézier(0,0,0.58,1) . |
| facilité d'entrée et de sortie | L'animation commence lentement et se termine lentement. Correspond à cubique-bézier(0.42,0,0.58,1) . |
| cubique-bézier(x1, y1, x2, y2) | Vous permet de définir manuellement les valeurs de 0 à 1. Vous pouvez créer n'importe quelle trajectoire de vitesse de changement d'animation. |
| démarrage par étapes | Définit l'animation étape par étape, divisant l'animation en segments, les changements se produisent au début de chaque étape. Équivalent à steps(1, start) . |
| fin d'étape | Animation pas à pas, des changements se produisent à la fin de chaque étape. Équivalent à steps(1, end) . |
| étapes (nombre d'étapes, début | fin) | Une fonction de temps pas à pas qui prend deux paramètres. Le nombre d'étapes est spécifié par un entier positif. Le deuxième paramètre est facultatif, il précise le moment où l'animation commence. Avec la valeur start l'animation démarre au début de chaque étape, avec la valeur end à la fin de chaque étape avec un délai. La latence est calculée en divisant la durée de l'animation par le nombre d'étapes. Si le deuxième paramètre n'est pas spécifié, la valeur par défaut end est utilisée. |
| initial | Définit la valeur de la propriété sur la valeur par défaut. |
| hériter | Hérite de la valeur de propriété de l'élément parent. |
Syntaxe
Div (fonction d'animation-timing : linéaire ;)
En utilisant animation pas à pas Vous pouvez créer des effets intéressants, tels que du texte en cours d'impression ou un indicateur de chargement.
5. Animation avec retard animation-delay
La propriété ignore l'animation pendant une durée spécifiée, ce qui permet d'exécuter chaque animation séparément. Un retard négatif démarre l'animation à partir d'un certain point de son cycle, c'est-à-dire à partir du moment indiqué dans le délai. Cela vous permet d'appliquer une animation à plusieurs éléments déphasés en modifiant uniquement le temps de retard.
Pour que l'animation démarre au milieu, vous devez définir un délai négatif égal à la moitié du temps défini dans animation-duration . Pas hérité.
Syntaxe
Div (animation-délai : 2s ;)
6. Répéter l'animation animation-iteration-count
La propriété permet d'exécuter l'animation plusieurs fois. Une valeur de 0 ou tout nombre négatif supprime la lecture de l’animation. Pas hérité.
Syntaxe
Div (nombre d'itérations d'animation : 3 ;)
7. Animation-direction
La propriété spécifie la direction dans laquelle l'animation se répète. Si l’animation ne se répète qu’une seule fois, alors cette propriété n’a aucune signification. Pas hérité.
Syntaxe
Div (animation-direction : alternative ;)
8. Bref enregistrement de l'animation
Tous les paramètres de lecture de l'animation peuvent être combinés dans une seule propriété - animation , en les répertoriant séparés par un espace :
Animation : nom de l'animation durée de l'animation fonction de synchronisation de l'animation retard de l'animation nombre d'itérations de l'animation direction de l'animation ;
Pour lire l'animation, il suffit de spécifier seulement deux propriétés - animation-name et animation-duration , les propriétés restantes prendront leurs valeurs par défaut. L'ordre dans lequel les propriétés sont répertoriées n'a pas d'importance, la seule chose est que le temps d'exécution de l'animation-duration doit précéder le délai d'animation-delay.
9. Lecture de l'animation animation-play-state
La propriété contrôle la lecture et l'arrêt de l'animation. L'arrêt de l'animation à l'intérieur d'une boucle est possible en utilisant cette propriété dans Script JavaScript. Vous pouvez également arrêter l'animation lorsque vous passez la souris sur un objet - state:hover . Pas hérité.
Syntaxe
Div:hover (animation-play-state : pause ;)
10. État de l'élément avant et après la lecture de l'animation animation-fill-mode
La propriété détermine l'ordre dans lequel les styles définis dans @keyframes sont appliqués à l'objet. Pas hérité.
| mode de remplissage d'animation | |
|---|---|
| Valeurs: | |
| aucun | Valeur par défaut. L'état de l'élément ne change pas avant ou après la lecture de l'animation. |
| en avant | Une fois l'animation terminée (telle que déterminée par la valeur animation-iteration-count), l'animation appliquera les valeurs de propriété au moment où l'animation se termine. Si animation-iteration-count est supérieur à zéro, les valeurs de la fin de la dernière itération terminée de l'animation sont appliquées (et non la valeur du début de l'itération suivante). Si animation-iteration-count est nul, les valeurs appliquées seront celles qui démarrent la première itération (identiques à animation-fill-mode : à l'envers ;). |
| en arrière | Pendant la période définie avec animation-delay , l'animation appliquera les valeurs de propriété définies dans l'image clé, qui débutera la première itération de l'animation. Il s'agit soit des valeurs d'image clé de départ (lorsque direction d'animation : normale ou direction d'animation : alternative) soit des valeurs d'image clé de destination (lorsque direction d'animation : inverse ou direction d'animation : alternative). |
Le résultat de cette leçon fonctionne dans les navigateurs Safari, Chrome, Opera, Firefox, à partir de la version 4 (où vous verrez des transformations, mais sans animation). De plus, en utilisant le préfixe du navigateur -ms-, vous pouvez voir des résultats positifs dans IE, à partir de la version 9.
Pour la mise en œuvre Animations CSS Doit être réglé paramètres spéciaux transformations qui répondront aux événements de la souris. Il faut également indiquer fonction spéciale, qui sera responsable du temps d’exécution de l’animation.
Pour que les transformations fonctionnent dans Firefox et Opera, remplacez simplement le préfixe -webkit par -moz et -o. Pour IE - à -ms.
1. Introduction aux transformations CSS
Les transformations CSS sont utilisées pour modifier l'apparence, la rotation et d'autres transformations d'un élément. Tous ces paramètres sont définis dans des feuilles de style classiques et lorsque vous ouvrez la page, vous voyez déjà le résultat final de la transformation. Afin de voir la transformation elle-même d'une vue à une autre (animation de transformation), vous pouvez attacher une sorte d'événement à l'élément (par exemple, l'événement de survol) ;
Dans l'exemple ci-dessous, nous avons placé 4 divs absolument identiques avec une bordure de 2 pixels. Pour transformer ces éléments dans les navigateurs fonctionnant sur webkit, ajoutez le préfixe -webkit-transform :
Sans ces transformations, les divs auront exactement la même apparence.
2. Animations
Pour animer des transformations dans les navigateurs Webkit, vous pouvez utiliser le préfixe -webkit-transition. La démo est présentée ci-dessous :
Il y a 4 divs identiques devant vous. Pour démarrer l'animation, vous devez déplacer la souris vers l'intérieur/l'extérieur. Avec tout ça, pas de JavaScript. HTML et CSS uniquement.
L'animation CSS peut être appliquée non seulement aux transformations, mais également à d'autres propriétés telles que la transparence, la couleur, etc. Ceci est démontré dans l’exemple suivant. Un élément est converti en un autre et vice versa :
Encore une fois, nous utilisons uniquement HTML et CSS. Dans ce cas, modifiez les paramètres border-color, border-radius.
4. Transformations multiples sur un élément
Pour appliquer plusieurs transformations au même élément, listez simplement les paramètres séparés par un espace. Par exemple:
Ces paramètres, lorsque vous passez la souris pendant 1 seconde, changeront la couleur du sous-menu, le feront pivoter et augmenteront sa taille.
4. L'animation en action
En voici un autre exemple intéressant combinant différents types de transformations dans une seule animation :
Cet exemple peut ne pas fonctionner très bien dans Safari 3 et versions précédentes Opéra.
La boîte entourée d'un cadre en pointillés qui apparaît pendant la lecture de l'animation représente la position de l'élément div. Nous le déplaçons simplement et faisons pivoter son contenu. C'est simple!
Pour créer davantage animation complexe, vous devez utiliser des images clés spéciales.
5. Utiliser différents types d'animation
Dans cet exemple, nous ajouterons plusieurs transformations d'éléments, dont chacune sera jouée dans un laps de temps spécifié.
Lorsqu'un événement :hover se produit, le carré bleu tourne, change de couleur en rouge et se déplace du coin supérieur gauche vers le coin inférieur droit.
La première chose que vous auriez probablement dû remarquer est la particularité du mouvement de la place. Maintenant, il n'est plus net, mais plus « courbé ». Tout cela grâce aux fonctions easy-out et easy-in.
Notez également que le changement de couleur se produit avant la rotation.
L'astuce est que vous pouvez diviser -webkit-transition en plusieurs entrées :
#block ( ... arrière-plan : bleu ; ... -webkit-transition-property : gauche, haut, arrière-plan, -webkit-transform ; -webkit-transition-duration : 2s, 2s, 1s, 1s ; -webkit-transition -fonction de synchronisation : facilité de sortie, facilité d'entrée, linéaire, facilité d'entrée ; -webkit-transition-delay : 0, 0, 0, 1s ; ... ) #stage:hover #block (gauche : 100px ; haut : 100 px ; arrière-plan : rouge ; -webkit-transform : rotation (360deg); )
6. L'événement d'un élément en transforme un autre
De nombreuses personnes seront probablement intéressées par des fonctionnalités similaires : cliquer sur un élément provoque la transformation d’un autre. En CSS, cela peut être réalisé en utilisant les sélecteurs >, + et ~.
Voici un exemple pertinent :
Dans cet exemple, nous avons utilisé le signe + pour interagir avec #box1 et #box2. ~ peut être utilisé pour accéder à des éléments situés quelque part loin de l'élément qui attend l'événement.
#box2 ( position : absolue ; gauche : 120px ; ... arrière-plan : bleu ; ... ) #box1:hover + #box2 ( -webkit-transform : rotation (360deg) ; -moz-transform : rotation (360deg) ; -o-transform : rotation (360deg); -ms-transform : rotation (360deg); transformation : rotation (360deg); gauche : 627px ; arrière-plan : jaune ; )
En même temps, on peut animer le premier bloc :
Le seul inconvénient de ces exemples est qu’ils ne fonctionnent pas (ou fonctionnent de manière tordue) dans les versions antérieures des navigateurs.
Merci à Niall pour le tutoriel suggéré !