Question

我已经用css制作了动画，但效果很好，但是如果鼠标从元素上移开，我希望它延迟或完成其一个周期，请参见以下代码片段。我已经尝试了一些从互联网上将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”。浏览器通常会原谅一些小错误，但有时您可能会遇到一些奇怪的行为。

转换延迟不适用于CSS（{before）CSS

1 个答案: