Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

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, delay

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 (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

10/10 sur 1 revues.
       Visites : 1388 - Pages vues : 1451
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

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