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