css - cssで連続したアニマトインを作成しますか?

Question

背景画像を拡大してから、ホバー時に縮小したい。

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

遅延プロパティがあることは知っていますが、異なる遅延などで複数の遷移を追加することは可能ですか?

私が思いついた1つの解決策は、追加のプロパティを追加することです

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

ただし、これはかなり厄介なソリューションのようです。たとえば、ループはサポートされておらず、スケーリングも不十分です。

Answer 1

代わりにCSSアニメーションを定義することができます

デモについては、このjsFiddleを参照してください：http：//jsfiddle.net/qDppZ/ （ 明確にするために-mozのみ）

コード：

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