Przycisk css3 kolor tła nieskończone przejście

Question

Czy istnieje sposób, aby kolor tła przycisku zniknął z szarości do niebieskiego, a następnie z powrotem do szarego, używając tylko css3? Dobrym przykładem jest domyślny przycisk akcji to kakao? Wiem, że można to zrobić w javascript, ale wolę używać tylko css.

Answer 1

Witam mam zrobiony przycisk poprzez CSS3 animacji proszę mieć wygląd i mamy nadzieję, że blisko do pytania: -

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

zobaczyć wersja demo: - http://jsbin.com/osohak/7/edit

czytaj więcej o CSS3 Transitions & Animacji http://css3.bradshawenterprises.com/cfimg/

Answer 2

Jeśli potrzebujesz znikną animację na hover lub takich rzeczach, CSS3 transition property jest rozwiązaniem.

EDIT:

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