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

我知道有一个延迟属性，但是是否可以添加具有不同延迟等的多个转换？

我想出的一个解决方案是添加一个额外的属性

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

然而，这似乎是一个相当混乱的解决方案。例如，它不支持循环并且扩展性很差。

Answer 1

你可以改为定义一个 CSS-Animation

请参阅此 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%;}
}