CSS3Animations 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;
}
{
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;
}
{
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;
}
