Boucler une transition ?

Résolu/Fermé
Utilisateur anonyme - 15 juil. 2015 à 03:05
 Utilisateur anonyme - 15 juil. 2015 à 14:36
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

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
Utilisateur anonyme
15 juil. 2015 à 08:28
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
Utilisateur anonyme
15 juil. 2015 à 14:21
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
Utilisateur anonyme
15 juil. 2015 à 14:36
de rien :)
0