制作css按钮:悬停动画工作

时间:2015-12-07 17:40:32

标签: html css

我期待以下代码在悬停时设置动画按钮。 但这不能正常工作 -

#button3 { 
    float: left; 
    height: 200px; 
    width: 200px;
}
#button3:hover {        
    animation: 3s stilius forwards;
    -webkit-transition: 3s stilius forwards;}
@keyframes stilius {
    100% {border-style: dashed;}}

2 个答案:

答案 0 :(得分:2)

您需要为边框定义初始状态,否则它不会知道如何转换。

例如:

#button3 {
  border-style:solid;
  border-width: 5px;
  border-color:#000;
  float: left;
  height: 200px;
  width: 200px;
}

#button3:hover {
  animation: 3s stilius forwards;
  -webkit-transition: 3s stilius forwards;
}

@keyframes stilius {
  100% {
    border-color: #fff;
    border-style: dashed;
  }
}

答案 1 :(得分:0)

您是否添加了边框属性?
您必须先添加border属性才能为其设置动画

eg:border:5px solid;

如果那不是问题,如果您使用的是mozilla等浏览器,请使用-moz-和-o-前缀