有没有办法使用transition
为背景设置动画?
不幸的是,transition
到a
元素并不起作用。
.gf-lbtn {
background-color: #fdce03;
color: #ffffff;
font-size: 16px;
font-size: 1rem;
padding: 16px;
padding: 1rem;
&:hover {
color: #ffffff;
text-decoration: none;
}
}
.gf-lbtn-icon-animated {
position: relative;
transition: all 0.2s;
}
.gf-lbtn-icon-animated:after {
content: '\f178';
font-family: FontAwesome;
margin-left: 16px;
margin-left: 1rem;
position: absolute;
right: 16px;
right: 1rem;
transition: all 0.2s;
}
.gf-lbtn-icon-animated:hover:after {
position: relative;
right: 0px;
right: 0rem;
}

<a class="gf-lbtn gf-lbtn-icon-animated" href="#" target="_self" role="button">Hover Me</a>
&#13;