Boucler une transition ?

Résolu
Utilisateur anonyme -  
 Utilisateur anonyme -
Bonjour,

Je cherche à changer la couleur d'un background, pour ensuite revenir à la couleur d'origine. J'ai un peu de mal à m'en sortir avec les transitions.

Si quelqu'un peut m'aider, voici mon Jsfiddle :
http://jsfiddle.net/rzxs357m/1/

Merci de m'aider à y voir plus clair.

1 réponse

  1. Utilisateur anonyme
     
    salut,

    si tu souhaite faire une sorte de highlight => https://api.jqueryui.com/highlight-effect/

    tu peux éventuellement le faire avec une keyframe.

    #test {
       border: 1px solid black;
       border-radius: 2px;
       padding: 5px;
       background: #FFF;
       -webkit-transition: background-color 100ms linear;
       -moz-transition: background-color 100ms linear;
       -o-transition: background-color 100ms linear;
       -ms-transition: background-color 100ms linear;
       transition: background-color 100ms linear;
      }
      #test:target {
       -webkit-animation: changeBg 1s;
       -moz-animation: changeBg 1s;
       animation: changeBg 1s;
      }
      @-webkit-keyframes changeBg {
      0%   {background: #AD310B;}
      100% {background: #FFF;}
      }
    
      @-moz-keyframes changeBg {
      0%   {background: #AD310B;}
      100% {background: #FFF;}
      }
    
      @keyframes changeBg {
      0%   {background: #AD310B; }
      100% {background: #FFF;}
      }
    


    bonne journée

    ׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º×
    1
    1. Utilisateur anonyme
       
      Merci pour ta réponse.

      Je souhaite effectivement faite un highlight en pur CSS.

      J'essaie ton code dans la journée et je te tiens au courant.
      0
    2. Utilisateur anonyme
       
      Merci l'ami, la méthode du keyframe fonctionne au poil, j'ai simplement adapté ton exemple pour qu'il fasse gris → orange → gris.
      Voici le Jsfiddle final pour ceux que ça intéresse :
      http://jsfiddle.net/rzxs357m/3/
      0
    3. Utilisateur anonyme
       
      de rien :)
      0