Zrobić kolejne animatoiny w css? - css3

Chcę obraz tła, a następnie kontrakt na zawisanie.

a:hover{
background-size: 80%;

}

a:hover{
background-size: 85%;
transition: background-size 0.05s ease;
//This is where I want the size to shrink back to it"s original size.
}

Wiem, że istnieje właściwość opóźnienia, ale czy można dodać wiele przejść z różnymi opóźnieniami itp.?

Jednym z rozwiązań, które wymyśliłem, jest dodanie dodatkowej własności

a.workaround:hover{
background-size: 80%;
transition-delay: 0.05s;
}

Jednak wydaje się to dość nieuporządkowane rozwiązanie. Na przykład nie obsługuje pętli i skaluje się słabo.

Odpowiedzi:

Zamiast tego możesz zdefiniować animację CSS

Zobacz: jsFiddle, aby zobaczyć wersję demo: http://jsfiddle.net/qDppZ/ (Tylko -moz dla jasności)

Kod:

a {
display: inline-block;
background: url(http://openclipart.org/image/800px/svg_to_png/95329/green_button.png) no-repeat;
background-size: 80%;
width: 100px;
height: 60px;
}
a:hover {
-moz-animation: anim 0.2s; /* Firefox */
}

@-moz-keyframes anim /* Firefox */
{
0% { background-size: 80%;}
50% { background-size: 85%;}
100% { background-size: 80%;}
}