Pergunta sobre css-animations, css, css-transitions – css3 botão fundo cor infinito transição

17

Existe uma maneira de fazer com que a cor de fundo de um botão desvanece de cinza para azul e depois de volta para cinza usando apenas css3? Um bom exemplo é um botão de ação padrão é cacau? Eu sei que isso pode ser feito em javascript, mas eu prefiro usar apenas css para isso.

Sua resposta

2   a resposta
35

olhe espero que seja próximo a sua pergunta: -

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;}
}

veja a demonstração: -http://jsbin.com/osohak/7/edit

leia mais sobre CSS3 Transitions & Animationhttp://css3.bradshawenterprises.com/cfimg/

5

hover ou coisas assim,Propriedade de transição CSS3 é a sua solução.

EDITAR:

.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;  
}
Obrigado pela sua consideração. Eu vou para a próxima edição. Tooraj Jam
Isso não é o que ele pediu Xsmael
Descubra o seu código de desejo na edição. Tooraj Jam
Você pode fornecer o código pop desta pergunta e um link de demonstração Rohit Azad
Oi @ Tooraj hover Propriedades, mas eu acho que pergunta é que a mudança automática de cor de .btn Rohit Azad

Perguntas relacionadas