过渡延迟不适用于CSS元素（：before）

Question

我已经在CSS中制作了一个动画，效果很好，但是如果鼠标从元素上移开，我希望它延迟或完成其一个周期，请参见下面的代码片段。 我尝试了一些互联网transition: all 0s ease 1s;解决方案transition: all 0s ease 1s; 到:before元素，但是根本不起作用。

我的密码

 .upvote, .downvote { position: absolute; font-size: 40px; transition: 0.15s ease-in-out; } .upvote:before { transition: all 0s ease 1s; } .upvote:hover:before { transition: all 0s ease 5s; font-family: "Font Awesome 5 Free"; content: '\\f106'; font-weight: 900; position: absolute; top: 1px; color: #28a745; animation: upvote 1.3s linear infinite; animation-delay: 0.5s; } @keyframes upvote { 0% { transform: translate(0, 0); } 50% { opacity: 0.5; } 80% { transform: translate(0, -30px); opacity: 0; } 99% { transform: translate(0, -30px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } } .downvote:hover:before { font-family: "Font Awesome 5 Free"; content: '\\f107'; font-weight: 900; position: absolute; top: 1px; color: #dc3545; animation: downvote 1.3s linear infinite; animation-delay: 0.5s; } @keyframes downvote { 0% { transform: translate(0, 0); } 50% { opacity: 0.5; } 80% { transform: translate(0, 30px); opacity: 0; } 99% { transform: translate(0, 30px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } } 

 <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/> <div class="upvote"> <i class="fa fa-angle-up"></i> </div> <div class="downvote"> <i class="fa fa-angle-down"></i> </div> 

Answer 1

您想过渡什么？

您的“ .upvote：before”选择器没有可转换的属性。 通配符“全部”为您提供了糟糕的服务。 我通常会明确指定过渡属性，因此很明显将进行转换。

伪元素“：before”也应以“ ::”开头，如“ :: before”。 浏览器通常会原谅一些小错误，但有时您可能会遇到一些奇怪的行为。