使用CSS制作按钮动画

debugcn 发表于 Dev

格里菲斯

我正在尝试使用悬停使两个按钮从小到大设置动画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;
}

先生

不需要关键帧；使用transition。

正如扎克（Zach）在评论中提到的那样，背景图片之间不能进行动画处理。您应该在CSS中重新创建背景。

从MDN：

CSS的过渡属性是一个速记属性transition-property，transition-duration，transition-timing-function，和transition-delay。它允许定义元素的两种状态之间的过渡。不同状态可以用像伪类来定义:hover或:active或使用JavaScript动态地设置。

例子

在此示例中，“全部”表示正常状态和:hover可以动画显示的状态之间的每个差异都应在0.5秒内过渡。这是动画属性的完整列表。

根据需要在非前缀过渡之前使用适当的浏览器前缀。根据您的需求，可能不需要浏览器前缀。请在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;
  }