.clignote{
  color: red;
  animation: clignoter 2s infinite; /*nom que tu donnes à ton animation   durée de l'animation nombre de répétition de l'animation (valeur par défaut:1) ici infinite: infini*/
}
.clignoteLim{
  color: red;
  animation: clignoter 2s 4;
}

.appar{
    animation: apparition 4s; /*nom que tu donnes à ton animation   durée de l'animation
    il est possible d'appliquer l'animation à plusieurs balises: ici les balise h1 et la balise d'id="p1"
    C'est # qui indique qu'il s'agit d'appliquer le code css à l'identifiant.*/
}
.chgCoul{
  animation: changeCouleur 2s;
}

.t1p th, .rotationY{
  animation: animRotationY 2s ease-in-out; /*ease-in-out: accelère, puis ralenti*/
}

.rotationX{
  animation: animRotationX 2s ease-in-out;
}

.rotX3{
  animation: animRotationX 2s 2; /* le dernier chiffre: nombre de répétition de l'animation (valeur par défaut: 1).
   infinite: l'animation recommence à l'infini*/
}

.transla{
  animation: animTranslation 2s;
}

.t1p tr:nth-child(2n){
  animation: animOpacite 3s;
}


/* définition des animations */

/* @keyframe: Animation  clignoter: nom de l'animation*/
@keyframes clignoter {
  /* mise en forme css au début de l'animation (0%) opacity: opacité: 1:, puis à 50% d l'animation: 0:trnsparant, puis à 100%: 1 */
  50% {
        opacity: 0;
    }
}

/* Animation  que j'ai appelé apparition*/
@keyframes apparition {
  /* paramètre au début ici: echelle du texte en x et en y */
  0% {
    transform: scale(10%, 10%);
  }
/* position finale: echelle en x et y: le texte passe débute reduit à 10% dans sa largeur  et hauteur 
et grossi à 100% dans sa largeur et hauteur*/
  100% {
    transform: scale(100%, 100%);
  }
}


/* Animation que j'ai appellé changeCouleur: à 0%, puis 25%,....100%
je change la couleur du texte. Toutes les animations en chageant le code css sont possibles */
@keyframes changeCouleur {
  0% {
    color: rgb(179, 0, 255);
  }
  25%{
    color: rgb(0, 15, 128);
  }
  50% {
    color:greenyellow;
  }
  75%{
      color: rgb(0, 255, 217);
  }
  100%{
    color:rgb(72, 237, 26);
  }
}

/* Animation que j'ai appellé animRotation
produit une rotation de 360° autour de l'axe y (axe verticale de l'écran). Il est possible de faire des rotations autour de x ou de z.
 Je fais en même temps un changement d'échelle de l'élément de 0 à 100% en x et y.
*/
@keyframes animRotationY {
  0% {
    transform: rotateY(0deg) scale(0, 0);
  }
  100%{
    transform: rotateY(360deg) scale(100%, 100%);
  }
}

/* idem que l'animation précédente, sauf que la rotation est autour de l'axe x (axe vertical). */
@keyframes animRotationX {
  0% {
    transform: rotateX(0deg) scale(0, 0);
  }
  100%{
    transform: rotateX(360deg) scale(100%, 100%);
  }
}


/* Animation que j'ai appellé animTranslation
elle translate et change l'échelle du texte en même temps
*/
@keyframes animTranslation {
  0% {
    transform: translate(30%, 0) scale(50%, 100%);
  }
  100%{
    transform: translate(0, 0) scale(100%, 100%);
  }
}

/* Animation que j'ai appellé animOpacite
elle translate et change l'échelle du texte en même temps
*/
@keyframes animOpacite {
  0% {
    background-color: rgb(120, 196, 244,0);/*l'opacité est le dernier chiffre de la liste*/
    
  }
  100%{
   background-color: rgb(120, 196, 244,1);
  }
}