在css中創建連續animatoins？

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

我知道有一個延遲屬性，但是有可能添加不同延遲等多個轉換嗎？我想出了

一種解決方案是增加一個附加屬性

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