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

在css中制作连续动画？

1 个答案: