Easy-Micro

LANGAGE CSS3
Animations CSS3

Les animations en CSS3

@keyframes

Exemple d'animation avec l'instruction @keyframes :
@keyframes mon_anim
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: mon_anim 5s;
}

Pour que cela fonctionne avec Chrome, Safari et Opera, vous devez rajouter le code ci-dessous en bleu:

@keyframes mon_anim
{
from {background: red;}
to {background: yellow;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mon_anim
{
from {background: red;}
to {background: yellow;}
}


div
{
animation: mon_anim 5s;
-webkit-animation: mon_anim 5s;
}

Pour aller plus loin...


Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]