Share
Il existe quelques exemples étonnants de transformations et de transitions CSS, et même si elles vous époustouflent, il y a de fortes chances que vous soyez également submergé et un peu intimidé! Ce tutoriel vous ramènera aux bases. Nous allons créer pas à pas des mouvements de transition fondamentaux du CSS3.
La prise en charge sur les navigateurs est déjà assez raisonnable. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1 et Internet Explorer 9.0 vous ont couvert en ce qui concerne les transformations. IE est un peu moins accommodant en ce qui concerne les transitions, bien qu'un support soit prévu pour IE10..
Pour faciliter la compréhension du mouvement, nous allons travailler sur une grille d'axes (que vous reconnaîtrez probablement à partir des mathématiques de base). Nous allons utiliser X et y coordonnées pour déplacer nos objets.
La seule différence (cruciale) est que sur notre axe la valeur -y est au dessus de l'axe des x, alors qu'il serait normalement en dessous. Pourquoi? HTML et CSS (ainsi que d’autres technologies Web telles que ActionScript) utilisent un inversé Système de coordonnées cartésien car les pages Web commencent en haut à gauche et sont lues vers le bas. Alors maintenant tu sais :)
Remarque: Je suppose que vous connaissez déjà la structure de fichiers HTML et CSS. Je vais sauter pour expliquer comment configurer le fichier CSS, placer des images et styliser l'Axis. Nous nous concentrerons sur l'animation des objets. Si vous n'êtes pas sûr que vos compétences HTML + CSS soient à la pointe, jetez un coup d'œil à la nouvelle version du Tuts + Premium HTML & CSS dans 30 jours (qui est gratuit) et vous apprendrez tout ce que vous devez savoir..
Le premier mouvement que nous allons démontrer est "horizontal"; nous animerons l'objet pour le déplacer à droite et à gauche.
Pour déplacer un objet de sa position initiale, nous utilisons: transformer: traduire (x, y);, où la valeur x doit être positive et la valeur y doit être 0 pour déplacer l'objet vers la droite.
Ouvrez votre éditeur de texte préféré et entrez le balisage HTML suivant, puis enregistrez le fichier..
Nous avons affecté trois classes à l'image:
Tout d'abord, nous allons positionner l'objet (notre image de van) au centre de la grille.
.object position: absolute; .van top: 45%; à gauche: 44%;
Dans cet exemple, nous allons déplacer l'objet 350px vers la droite. La syntaxe est transformer: traduire (350px, 0); et l'objet se déplacera lorsque l'axe sera survolé. Nous le déclarons donc avec #axis: survolez .move-right.
#axis: survolez .move-right transformer: traduire (350px, 0); -webkit-transform: traduire (350px, 0); / ** Chrome & Safari ** / -o-transform: translate (350px, 0); / ** Opera ** / -moz-transform: translate (350px, 0); / ** Firefox ** /
La propriété de transformation CSS ne fera que déplacer l'objet d'un point à un autre, elle ne s'animera pas entre les deux états. Pour ce faire, nous devons ajouter une propriété de transition dans la classe .object..
.object position: absolute; transition: tous les 2 s'installent facilement; -webkit-transition: tous les 2 sont faciles à installer; / ** Chrome & Safari ** / -moz-transition: les 2 sont plus faciles à installer; / ** Firefox ** / -o-transition: tous les 2 s'installent facilement; / ** Opera ** /
Cette règle de transition indiquera au navigateur d’animer tout propriétés attachées à l'objet pour 2 secondes en utilisant un facilité d'entrée fonction de synchronisation (interpolation), sans délai.
Nous pouvons utiliser 6 types de fonctions de transition-timing:
Pour déplacer un objet vers la gauche, nous devons simplement entrer une valeur négative dans le champ. X coordonner, tandis que le y la coordonnée doit rester 0. Dans cet exemple, nous allons déplacer l'objet -350px à gauche.
Créez un autre fichier HTML et entrez le balisage suivant.
Cette fois nous utilisons le se déplacer à gauche classe pour définir la règle css pour déplacer l'objet vers la gauche.
Ensuite, nous entrons -350px comme coordonnée x. transformer: traduire (-350px, 0); pour déplacer l'objet vers la gauche. Assez facile?
#axis: survolez .move-left transform: translate (-350px, 0); -webkit-transform: translate (-350px, 0); / ** Safari & Chrome ** / -o-transform: translate (-350px, 0); / ** Opera ** / -moz-transform: translate (-350px, 0); / ** Firefox ** /
Comme nous avons précédemment défini la règle de transition dans notre classe .object, nous n'avons pas besoin de la redéfinir.
Déplacer un objet verticalement est assez facile, presque identique à un déplacement horizontal. La seule différence est que nous allons utiliser la valeur -y pour déplacer l'objet vers le haut et la valeur y pour la déplacer vers le bas..
Le balisage HTML est identique aux deux exemples précédents. Cependant, nous remplaçons l'objet par une fusée (à des fins d'illustration), et la classe que nous utilisons pour notre mouvement ascendant est déplacer vers le haut.
Comme avec notre fourgonnette, nous allons placer la fusée au centre de la grille:
.fusée haut: 43%; à gauche: 44%;
Comme nous l’avons déjà mentionné, la coordonnée y doit être négative pour pouvoir déplacer la fusée vers le haut. dans ce cas, nous le déplaçons 350px jusqu'à.
#axis: survolez .move-up transform: translate (0, -350px); -webkit-transform: traduire (0, -350px); -o-transformer: traduire (0, -350px); -moz-transform: translate (0, -350px);
La méthode pour déplacer un objet vers le bas est (surprise, surprise) l’opposé du déplacement vers le haut; la valeur de la coordonnée y doit être positive et la coordonnée x doit rester à 0. La syntaxe est la suivante: transformer: traduire (0, y);
Dans cet exemple, nous allons démontrer le mouvement descendant à l'aide d'une pièce de monnaie. Génie!
#axis: survolez .move-down transform: translate (0,350px); -webkit-transform: translate (0,350px); -o-transformer: traduire (0,350px); -moz-transform: translate (0,350px);
Pour créer une transition en diagonale, nous allons combiner les valeurs des deux coordonnées X et y. La syntaxe devrait être transformer: traduire (x, y). Selon la direction, la valeur de X et y pourrait être négatif ou positif.
Et pour démontrer notre mouvement en diagonale, nous allons utiliser un avion en papier.
Nous allons diriger le mouvement vers le nord-est. Pour le X valeur de coordonnée nous entrons une valeur positive (350px) et pour la y coordonnées nous entrons une valeur négative (-350px). La syntaxe ressemblera donc à ceci: transformer: traduire (350px, -350px);
#axis: survolez .move-ne transform: translate (350px, -350px); -webkit-transform: translate (350px, -350px); -o-transformer: traduire (350px, -350px); -moz-transform: translate (350px, -350px);
N'hésitez pas à expérimenter et à diriger le mouvement des objets le long des autres axes diagonaux.
Le mouvement de rotation dans CSS3 est régulé à l'aide d'une coordonnée radiale de 0 ° à 360 °. Pour faire pivoter un objet, appliquez simplement la propriété css suivante: transformer: faire pivoter (ndeg); où n est le degré de rotation.
Pour faire pivoter un objet dans le sens des aiguilles d'une montre, entrez une valeur positive pour faire pivoter (ndeg) propriété.
Pour cet exemple, nous allons utiliser un crayon pour montrer le mouvement..
Et nous allons faire pivoter l'objet de 360 degrés dans le sens des aiguilles d'une montre.
#axis: hover .rotate360cw transformer: rotate (360deg); -webkit-transform: rotation (360deg); -o-transformer: faire pivoter (360 °); -moz-transform: rotation (360 °);
Pour effectuer une rotation dans le sens inverse des aiguilles d'une montre, nous entrons (vous l'avez deviné) une valeur négative.
Nous utilisons toujours le crayon comme objet, mais nous allons changer sa classe en .rotate360ccw.
#axis: hover .rotate360ccw transformer: faire pivoter (-360deg); -webkit-transform: rotation (-360deg); -o-transformer: faire pivoter (-360deg); -moz-transform: rotation (-360deg);
L'échelle est une fonctionnalité intéressante dans CSS3. En utilisant la propriété scale (n) ou scale (x, y), nous pouvons agrandir ou réduire un objet dans notre code HTML. L'objet sera mis à l'échelle en fonction de la valeur n / x, y, où l'axe des x correspond à la largeur et l'axe des y représente la hauteur. Par exemple, si on entre scale (2), l'objet sera redimensionné deux fois (200% plus grand) le long des deux axes, à partir de sa dimension initiale.
Jetons un coup d'oeil à l'exemple ci-dessous.
Dans cet exemple, nous allons augmenter la taille de la voiture de 200%, donnant l’illusion que la voiture se rapproche (espérons-le).
Encore une fois, le balisage HTML a à peine changé, mais cette fois, nous utilisons une voiture comme objet..
#axis: hover .larger transformer: scale (2); -webkit-transform: scale (2); -o-transformer: échelle (2); -moz-transform: scale (2);
Après avoir joué avec des mouvements de base et des transformations, nous allons maintenant essayer de combiner certains d'entre eux. Nous allons jeter un coup d'oeil.
Cette fois, nous allons utiliser un boomerang pour démontrer l'animation.
Le plan est de déplacer le boomerang en diagonale, tout en effectuant des rotations en même temps. Pour ce faire, il suffit de lister les transformations, séparées par des espaces.
#axis: survolez .multiple transform: translate (350px, -350px) rotation (360deg); -webkit-transform: traduire (350px, -350px) pivoter (360deg); -o-transformer: traduire (350px, -350px) pivoter (360deg); -moz-transform: traduire (350px, -350px) pivoter (360deg);
Ce sont des exemples de base, et il y a d'énormes possibilités de les développer! Rappelez-vous: tenez compte de la prise en charge du navigateur lorsque vous utilisez les propriétés CSS3 et ne vous fâchez pas avec ces effets - ils devraient améliorer votre conception, et non la noyer.!
Pour plus d’inspiration, jetez un coup d’œil à quelques-unes des animations et effets en CSS3 sur Envato Market. Voici quelques exemples:
Ces transitions de basculement, de fondu et de rayonnement CSS3 magnifiques, subtiles et utiles, vous permettent d’agrandir l’immobilier d’un site Web et d’utiliser votre espace plus efficacement. Tout contenu, vidéos, cartes, images, etc., peut être retourné (ou estompé).
Flip 'n' Fade sur le marché d'EnvatoCeci est un utilitaire basé sur CSS / jQuery qui vous permettra de créer un effet de fond de ciel nocturne animé inhabituel pour votre site Web..
Fond de ciel nocturne animé sur le marché EnvatoCeci est un kit de Pure CSS3 Loader Animations. Ces 15 effets d’animation CSS3 sont compatibles avec tous les principaux navigateurs..
Animations Pure CSS3 Loader sur le marché EnvatoIl s'agit d'une collection de cinq légendes d'images animées uniquement CSS. Ce kit offre de superbes effets et vous fera gagner beaucoup de temps lors de la création de sites Web..
tFigure - Légendes des images sur le marché EnvatoCet élément vous permet de créer votre propre grille de mosaïque avec vos médias sociaux pour le personnel et plus. Il comprend 28 icônes sociales et une gamme de configurations de grille différentes.
Mur de mosaïque sociale sur le marché Envato
Accentsconagua
