Question

我正在尝试使用CSS在悬停时使两个按钮从小到大动画。我有以下内容确实使按钮更改但没有动画。（ button.png 和 buttonHover.png 是相同的像素宽度和高度 - 但图像是一个带有透明环绕和大按钮的小按钮。）

这可能是错误的做法 - 这是我第一次做到这一点。

a.button {
background: url(button.png) no-repeat 0 0;
width: 150px;
height: 62px;
display: block;
line-height: 62px;
text-align: center;
font-size:9px;
color: white;
}

a.button:hover{
    background: url(buttonPressed.png) no-repeat 0 0;
    font-size:14px;
-webkit-animation: myButton 1s; /* Chrome, Safari, Opera */
 animation: myButton 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myButton {
    background: url(buttonHover.png) no-repeat 0 0;
    font-size:14px;
}

/* Standard syntax */
@keyframes myButton {
    background: url(buttonPressed.png) no-repeat 0 0;
    font-size:14px;
}

Answer 1

不需要关键帧;使用transition。

作为Zach mentioned in the comments，背景图像无法在两者之间进行动画处理。你应该在CSS中重新创建背景。

From the MDN:

CSS过渡属性是transition-property，transition-duration，transition-timing-function和transition-delay的简写属性。它允许定义元素的两个状态之间的转换。可以使用:hover或:active等伪类定义不同的状态，也可以使用JavaScript动态设置。

实施例

在此示例中，“all”表示可以设置动画的正常状态和:hover之间的每个差异都应该超过0.5秒。 Here is a complete list of animated properties

根据需要在非前缀转换之前使用适当的浏览器前缀。根据您的需要，浏览器前缀可能是不必要的。 Have a look over here on caniuse.com了解浏览器支持的概述。

  a.button {
    background: #000;
    width: 150px;
    height: 62px;
    display: block;
    line-height: 62px;
    text-align: center;
    font-size: 9px;
    color: #FFF;
    transition: all 0.5s;
  }
  a.button:hover {
    background: #F00;
    font-size: 14px;
  }

<a class="button">Button</a>

Answer 2

我给你一个关于如何实现它的工作示例。希望它有所帮助。

button {
    width : 100px;
    height: 20px; 
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

button:hover {
        width : 150px;
        height: 30px;
}


<button>

JSfiddle

使用CSS制作按钮动画

2 个答案:

实施例