我期待以下代码在悬停时设置动画按钮。 但这不能正常工作 -
#button3 {
float: left;
height: 200px;
width: 200px;
}
#button3:hover {
animation: 3s stilius forwards;
-webkit-transition: 3s stilius forwards;}
@keyframes stilius {
100% {border-style: dashed;}}
答案 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-前缀