嗨!
在使用动画填充模式的动画后过渡不起作用:转发; 第一个动画触发并在悬停时结束,但在取消悬停后过渡不适用。
代码笔 here
它在 chrome 和 safari 中重现。在 Firefox 中工作正常。
哈巴狗:
button Button
CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 100%;
right: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
animation: nav-link-hover .25s forwards;
}
}
}
@keyframes nav-link-hover {
0% {
left: 0;
right: 100%;
}
100% {
left: 0;
right: 0;
}
}
更新
我找到了解决方法,但会等待任何答案,如果它会更好或者例如成功使用损坏的关键帧,我会很乐意接受它。
最佳答案
仍然不知道 chrome/safari 中的关键帧有什么问题,但已经找到了简单的解决方法。
现在第一个“before”元素在右边,没有宽度 right: 0; width: 0;
.
悬停时它以 100% 的宽度向左移动,宽度开始过渡增长:left: 0;右:自动;宽度:100%;
。
最后,当 hover 消失时,'before' 开始减少,再次停在右端。
新代码:
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
}
}
关于css - 动画前进后过渡不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46910294/