Trucsweb.com

Trucsweb.com

CSS

Animation CSS3

RDFFav

Transitions, transformation et animations CSS3

Animez la transition de vos éléments HTML en une ligne de code CSS. Hyperlien réactif en pur CSS avec effets de transition.Animation, transition, bouton, transform, @keyframes, duration, iteration-count, direction, timing-function, ease, cubic-bezier, from, to, delayTransitions, transformation et animations CSS3

Hyperlien réactif en pur CSS avec effets de transition
Place de l’Étoile  -  Place Charles-de-Gaulle, Paris (Auteur : Google)

Si le HTML5 s’accompagne toujours d’un bon « cadriciel », on peut dire que le CSS3 a pour sa part donner un bon coup de bar à jQuery. En grande partie grâce à ses transitions spectaculaires, dégradé, flou, zoom, rebondi... lorsque l’état d’un éléments HTML vient à changer dans le temps et dans l’espace. Je viens de vous décrire la transition CSS3. C’est à dire l’ajout d’un effet dit transitons quand les propriétés d’une élément HTML change, sans utiliser Flash ou Javascript comme dit la W3C, et surtout sans jQuery... Ce qui n’empêche pas le JavaScript de provoquer ses animation.

La transitons s’attache à un élément comme une simple propriété, mais il prend effet seulement lorsque le propriété en question change de valeur. Animez la transition de vos éléments HTML en une ligne de code CSS en modifiant la couleur d’un élément avec les sélecteurs par défaut comme hover, target. Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.

Par exemple si on modifie la largeur d’un élément avec un langage script ou encore en pur CSS avec les sélecteurs comme hover, target.

Il y a 4 propriétés :

transition-delay
Spécifie quand la transition devra commencer
transition-duration
Spécifies le nombre de seconde ou de milliseconde que prendra la transition
transition-property
Spécifie le nom de la propriété CSS affect.é par la transition ;
transition-timing-function
Spécifie le type de vitesse de la transition.
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

Ou une combinaison des 4 propriétés de transition :

transition
property duration timing-function delay|initial|inherit;

Il faut spécifier au minimum la propriété affecté et et la duré de la transition.

div {
  transition: width 2s;
} 

div:hover {
    width: 300px;
} 
Exemples de transition simples

Une base de bouton avec un effet de diffusion (fade) lors du changement de couleur de fond avec une transition transition: all 500ms ease;.

<style>
.cBouton {
  background: #c6c3bd;
  color: #f2f2f2;
  padding: 10px;
  display:inline-block;
  text-decoration: none;
  transition: all 500ms ease;
}

.cBouton:hover {
  color: #d6d3ce;
  background: #5d625c;
  text-decoration: none;
}
</style>
<a href="#" class="cBouton">Bouton</a>

Il suffit de modifier une propriété à volonté pour obtenir un effet différent. Laissez aller votre imagination!

<style>
.cBouton.cZoomOut:hover {
  margin-right:20px;
  margin-left:20px;
}
.cBouton.cZoomIn:hover {
  padding-right:20px;
  padding-left:20px;
}
.cBtn.cBordure:hover {
  box-shadow: inset 0 0 0 25px #5d625c;
}
.cBtn.cCercle:hover {
  border-radius:30%;
}
</style>
<a href="#" class="cBouton">Diffusion</a>
<a href="#" class="cBouton cBtnZoomIn">Marge intérieure</a>
<a href="#" class="cBouton cBtnZoomOut">Marge extérieure</a>
<a href="#" class="cBouton cBordure">Bordure</a>
<a href="#" class="cBouton cCercle">Cercle</a>
Transformation CSS

Exemple avec « prefix » -webkit- et -ms- pour la portabilité.

<style>
.cBouton.cRotation:hover {
  -webkit-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
}
.cBouton.cGrossir:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
.cBouton.cRetrecir:hover{
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}
</style>
<a href="#" class="cBouton cRotation">Rotation</a>
<a href="#" class="cBouton cGrossir">Grossir</a>
<a href="#" class="cBouton cRetrecir">Rétrécir</a>
Animation CSS

Comme la transition et la transformation, l’animation permet à un élément de changer progressivement d’un style à l’autre. Pour utiliser l’animation CSS3, vous devez d’abord spécifier des images clés (@keyframes) pour l’animation. Les images clés contiennent les propriétés que l’élément aura à certains moments.

Propriété
Description
@keyframes
Spécifie le code d’animation
animation
Propriété abrégée permettant de définir toutes les propriétés de l’animation
animation-delay
Spécifie un délai pour le début d’une animation
animation-direction
Indique si une animation doit être exécutée en sens inverse ou en alternance
animation-duration
Spécifie le nombre de secondes ou de millisecondes qu’une animation doit parcourir pour terminer un cycle
animation-fill-mode
Spécifie un style pour l’élément lorsque l’animation n’est pas en cours de lecture (lorsqu’elle est terminée ou lorsqu’elle a un délai)
animation-iteration-count
Spécifie le nombre de fois qu’une animation doit être jouée
animation-name
Spécifie le nom de l’animation @keyframes
animation-play-state
Indique si l’animation est en cours d’exécution ou en pause
animation-timing-function
Spécifie la courbe de vitesse de l’animation avec les valeurs suivantes :
ease
spécifie une animation avec un démarrage lent, puis rapide, puis se termine lentement (c’est par défaut)
linear
spécifie une animation avec la même vitesse du début à la fin
ease-in
spécifie une animation avec un démarrage lent
easy-out
spécifie une animation avec une fin lente
easy-in-out
spécifie une animation avec un début et une fin lents
cubique-bezier (n, n, n, n)
vous permet de définir vos propres valeurs dans une fonction cubique-bezier
animation-name: test;
animation-duration: 4s; /* ou : Xms */
animation-iteration-count: 10;
animation-direction: alternate; /* ou : normal */
animation-timing-function: ease-out; /* ou : ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
animation-fill-mode: forwards; /* ou : backwards, both, none */
animation-delay: 2s; /* ou : Xms */

En une seule instruction (attention de respecter l’ordre : duration, iteration-count puis delay).

animation: test 4s 2s 10 alternate ease-out forwards
La règle @keyframes

Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l’animation passe progressivement du style actuel au nouveau style à certains moments. Pour que l’animation fonctionne, vous devez lier l’animation à un élément. L’exemple suivant lie l’animation « kCouleur » au bouton « .cBouton.cCouleur ». L’animation durera 2 secondes et passera graduellement de la couleur d’arrière-plan #c6c3bd à #000000 :

« Animation » simple avec délais combiné avec « @keyframes : from to »

<style>
.cBouton.cCouleur:hover {
  animation: kCouleur 2s;
}

@keyframes kCouleur {
  from {background-color: #c6c3bd;}
  to {background-color: #000000;}
}
</style>
<a href="#" class="cBouton cCouleur">Couleur</a>

L’exemple suivant modifie la position du bouton lorsque l’animation est terminée à 40% et à nouveau terminée à 100% :

<style>
.cBouton.cSaut:hover {
  animation: kSaut 1s;
}

@keyframes kSaut {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
  40% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
</style>
<a href="#" class="cBouton cSaut">Saut</a>
Résultat

Saut

Références
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Bonjour, Je suis désolé, je n`y ai rien compris. J`ai l`impression que vous parlez seulement à ceux qui sont dejà de grands programmeurs. Vous leur dites ce qu`ils savent déjà, quoi? Ça vous est déjà arrivé de parler pour vous faire comprendre?
    64x64
    J. M.
    Date (GMT) : 2020-04-01 04:18:29 (UTC +0000)
    Date local : Wed Apr 01 2020 00:18:44 GMT-0400 (Eastern Dayligh
    • Salut, Se faire planter pour du gratuit, ce n'est pas un tantinet ingrat l'ami ? Désolé, moi aussi je suis souvent perdu dans ce vaste monde. C'est effectivement un domaine très frustrant. On peut tricher, on peut copier, mais pour vraiment comprendre il faut partir à zéro ! Il faut travailler, il faut passer des heures à comprendre erreur après erreur. J'en ai fait encore hier une bonne dizaine. Le domaine change plus vite que son ombre, je suis encore aujourd'hui dans l'ignorance quoique je me garde de tomber sur les autres pour absolument rien ! Mais c'est comme ça, il y a des domaines moins pénibles ! C'est peut-être aussi à cause de mon accent québécois, je suis encore une fois désolé d'être québécois !! Les Trucsweb.com ratissent large et se spécialise depuis 20 ans. C'est essentiellement un aide mémoire personnel que je partage, car ma mémoire est celle d'un ver de terre. Je suis un cancre alors j'ai besoin d'aide. Voilà pourquoi j'ai créé les Trucsweb.com, ça va pour l'instant vous me suivez ? Et pourquoi pas le partager gratuitement avec la francophonie du monde entier... Voilà tout. Loin de moi l'idée de vous embêter ! C'est fou combien le Web était plus fraternel il y a 20 ans! Mais il y a dans ce domaine des cultures. Certaines m'échappent complètement, car j'ai choisi d'autres avenues ou encore parce que je suis de la vielle-école. Mais sachez encore une fois que je me retrouve souvent dans votre situation, aussi frustré. Par exemple, si vous ne gérez pas un serveur Web, la moitié des tutoriels ne s'adresse effectivement pas à vous. Si cous ne savez pas ce qu'est le XML, vous êtes peut être comme la majorité des programmeurs qui préfère le JSON. Et si vous aimez les techniques agressives de SEO, vous n'êtes encore là vraiment pas à la bonne place. J'espère que vous me comprenez. Alors je suis encore une fois désolé d'être sur votre chemin et d'être aussi peu universel ! Mais n'ayez crainte, ce site disparaitra avec moi avant longtemps et vous n'aurez plus à vous peindre de mon incompétence. Mais habituez-vous l'ami, je ne serai certes pas le dernier que vous rencontrerez ! Et n'oubliez jamais que derrière un site Web se trouvent souvent de simples hommes et femmes bien intentionnés. Enfin, au lieu de vous fier à un petit con qui radote pour rien comme vous dites, je vous invite à consulter le site de la W3schools (https://www.w3schools.com) ou encore sur le sujet le site de Mozilla (https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) pour lire de vrais spécialistes professionnels. Bonne journée
      64x64
      oznog
      Date (GMT) : 2020-04-01 12:39:18 (UTC +0000)
      Date local : Wed Apr 01 2020 08:39:33 GMT-0400 (heure d’été de


    • Très bon tuto, merci pour le partage ! Ps : Intelligence, maturité, finesse et subtilité se glissent par ailleurs dans votre réponse au com juste au dessus, bravo !
      64x64
      Ohlbaum
      Date (GMT) : 2020-04-23 18:25:06 (UTC +0000)
      Date local : Thu Apr 23 2020 20:25:45 GMT+0200 (heure d’été d’E

      • Bonjours ,votre tuto est très bien expliqué cependant j'ai un problème j'ai utiliser une keyframe from to pour faire mon animation au moment du hover et malgrès tout mes essaie impossible de la faire revenir progressivement . Je vous mets mon code ci-dessous peut etre ai-ja mal fais qlq chose (très certainement d'ailleur ). HELP PLZ :,( (les propriete en commentaire son celle deja tester) .block-choix{ display: flex; border: none; width: 90%; margin: 10px 0; border-radius: 20px; box-shadow: 0 1px 4px black; overflow: hidden; // animation-duration: reverse; // transition: all .4s; // animation-duration: all 3s; // transition-timing-function:cubic-bezier(0.075, 0.82, 0.165,1 ); &:hover{ .anim{ animation-name: apparition-chek; animation-fill-mode: forwards; } i{ font-size: 25px; animation-duration: 3s; animation-name: rotation-check; } } .anim{ margin-right:-25%; width: 15%; display: flex; justify-content: center; align-items: center; background-color: green; animation-duration: 3s; // transition-delay: 2s; } @keyframes apparition-chek { from{ margin-right:-25%; width: 15%; } to{ margin-right: 0%; width: 20%; } } @keyframes rotation-check{ from{ rotate: 0deg; } to{ rotate: 360deg; } }
        64x64
        umpalumpa
        Date (GMT) : 2022-11-18 08:42:44 (UTC +0000)
        Date local : Fri Nov 18 2022 09:42:42 GMT+0100 (heure normale d
        • Salut, Ton code provient d’où, car ce n'est pas du CSS mais du SCSS, c'est-à-dire un langage de programmation pour générer du CSS. Il faut le compiler avant qu'il fonctionne. Déjà, ça m'étonne qu'il fonctionne à moitié. La logique n'est déjà pas simple à comprendre, alors avec le mauvais langage, tu places la barre très haute. Les deux barres sont des commentaires, mais en SCSS. Utilise /* commentaires */ en CSS. Même chose pour le raccourci &:hover, tu dois compiler ton code pour avoir .block-choix:hover... La première chose à faire c'est compiler ton SCSS, il y a peut être un bouton pour le compiler dans la site d'où provient ce code... La deuxième chose à faire, clic [F12] pour ouvrir la console et regarde les erreurs CSS. ensuite tu peux revenir coller proposer ton code sans erreur. Ciao
          64x64
          oznog
          Date (GMT) : 2022-11-18 13:05:20 (UTC +0000)
          Date local : Fri Nov 18 2022 08:05:16 GMT-0500 (heure normale d


        Ajouter un commentaire
        Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
        Votre évaluation du tutoriel

        6.75/10 sur 4 revues.
               Visites : 12029 - Pages vues : 12275
        X

        Trucsweb.com Connexion

        Connexion

        X

        Trucsweb.com Mot de passe perdu

        Connexion

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte

        Créer un compte

        .
        @