Boucler une transition ?

Résolu
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. 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. 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.
    2. 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/
    3. de rien :)