Pregunta sobre css-transitions, css, css-animations – botón css3 color de fondo transición infinita

17

¿Hay una manera de hacer que el color de fondo de un botón se desvanezca de gris a azul y luego vuelva a gris usando solo css3? Un buen ejemplo es un botón de acción predeterminado es cacao? Sé que esto se puede hacer en javascript pero prefiero usar solo css para esto.

Tu respuesta

2   la respuesta
5

Si necesita animación de fundido enhover o esas cosas,Propiedad de transición CSS3 es tu solucion

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;  
}
Gracias por tu consideración. Iré para la próxima edición. Tooraj Jam
Hola, @Tooraj it hover Propiedades, pero creo que la pregunta es que el cambio automático al color de .btn Rohit Azad
Eso no es lo que pidió Xsmael
¿Puede proporcionar el código poper de esta pregunta y un enlace de demostración? Rohit Azad
Descubre tu código de deseo en la edición. Tooraj Jam
35

Hola, he hecho el botón a través de CSS3 Animation. Por favor, mira. Espero que esté cerca de tu pregunta: -

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

ver la demostración: -http://jsbin.com/osohak/7/edit

Leer más sobre Transiciones y Animación CSS3http://css3.bradshawenterprises.com/cfimg/

Preguntas relacionadas