html - 使用 CSS 制作按钮动画

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。

作为扎克 mentioned in the comments , 背景图像之间不能设置动画。您应该在 CSS 中重新创建背景。

From the MDN:

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using 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>