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

---

是否添加了边框属性？
必须首先添加边界属性才能设置其动画

eg:border:5px solid;

---

如果这不是问题所在，如果您使用的是类似mozilla等浏览器，请同时使用-moz-和-o-前缀

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

例如：

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