• animation couleur texte

    Nous pouvons donner une animation à un élément particulier, qui se déroulera automatiquement.

    Premier exemple simple: le changement de couleur d'un texte:

    Changement de couleur
    code de l'exemple:
    <div id="anim1">Changement de couleur</div>
    <style><!--
    #anim1{ animation:ex1 5s linear infinite; font-size:20pt; text-shadow:1px 1px black; width:400px; float:left;}
    @keyframes ex1{
    0%    {color:red;}
    50%  {color:yellow;}
    100% {color:green;}
    }
    --></style>

    L'écriture de ce type de code s'est bien simplifiée puisque les préfixes par navigateur, ne sont plus nécessaires, du moins pour FF et Chrome.

    Vous trouverez sur le net des explications sur l'écriture d'un code animation, avec ses différents paramètres:

    #anim1 {
    animation-name: ex1;
    animation-duration:5s
    animation-delay:0s
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction:alternate;
    }
    ce qui peut s'écrire, en simplifié:
    .anim1 {animation: ex1 5s 0s infinite linear alternate;}

    Il faut, comme d'habitude, donner un nom à l'élément à animer (id="anim1)
    Ensuite, il faut nommer l'animation (ex1) et en définir les paramètres: ici, sur 5 secondes, commence en rouge, devint jaune pour finir en vert.
    Cela se fait par @keyframes ex1{ ...} avec les paramètres de l'animation, ici, en %.
    Les paramètres du texte sont écrit ensuite: taille police et ombre texte(font-size et text-shadow)