переход-задержка не работает с элементом (: before) CSS - PullRequest
Новая
       9

переход-задержка не работает с элементом (: before) CSS

0 голосов
/ 24 декабря 2018

Я сделал анимацию в 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>

1 Ответ

0 голосов
/ 28 декабря 2018

Что вы хотите перевести?

Ваш селектор ".upvote: before" не имеет свойств для перехода.Подстановочный знак «все» дал вам плохой сервис.Я обычно явно указываю свойство перехода, поэтому очевидно, что будет преобразовано.

Также псевдоэлемент ": before" должен начинаться с "::", как ":: before".Браузеры обычно прощают мелкие ошибки, но в какой-то момент вы можете столкнуться со странным поведением.

...