web-dev-qa-db-fra.com

css3 bouton couleur d'arrière-plan transition infinie

Existe-t-il un moyen de faire passer la couleur d'arrière-plan d'un bouton du gris au bleu puis de revenir au gris en utilisant uniquement CSS3? Un bon exemple est un bouton d'action par défaut est cacao? Je sais que cela peut être fait en javascript mais je préfère utiliser uniquement CSS pour cela.

csscss-transitionscss-animations
19
Eric Pigeon

Salut, j'ai fait le bouton via CSS3 Animation s'il vous plaît regardez j'espère que c'est près de votre question: -

[~ # ~] html [~ # ~] 

<input type="submit" value="submit" class="button" />

[~ # ~] css [~ # ~] 

.button {
    width:100px;
    height:20px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst /* Firefox */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

voir la démo: - http://jsbin.com/osohak/7/edit

en savoir plus sur les transitions et l'animation CSS3 http://css3.bradshawenterprises.com/cfimg/

38
Shailender Arora

Si vous avez besoin d'une animation de fondu sur hover ou de telles choses, propriété de transition CSS est votre solution.

ÉDITER:

.btn {
  background-color: lightblue;
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}  

.btn:hover {
  background-color: lightgreen;  
}
5
Tooraj Jam