Через что делать анимацию при наведении курсора (hover): transition или @keyframes?

Question

[Артём Иннокентьев]

Делаю анимацию при наведении курсора (hover). Пробовал двумя путями:
1) через transition:

.master_figure p
{
	opacity: 0;
	text-align: center;
	background-color: black;
	transition: 0.5s ease-out;
	transform: translateY(0px);
	color: white;
}

.master_figure:hover p
{
	opacity: 0.8;
	transition: 0.5s ease-out;
	transform: translateY(-25px);
}

2) через @keyframes:

.master_figure p
{
	text-align: center;
	background-color: black;
	color: white;
}

.master_figure:hover p
{
	animation: pIn 0.5s ease forwards;
}

@keyframes pIn
{
	0% {opacity: 0; transform:translateY(0px);}
	100% {opacity: 0.8; transform: translateY(-25px);}
}

Второй вариант больше понравился, потому что анимация отделена от таких настроек вроде центрирования, цвета и цвета фона - думаю, так более логично.
Какой вариант более правильный? Почему? Также, во втором случае, есть проблема - когда убираю курсор, все без анимации возвращается назад, если кто знает ответ - подскажите, пожалуйста)

Answer 1

[Nikolay Talanov]

Кейфреймы нужны для цикличной , "односторонней" или сложной (множество шагов с множеством изменений разных свойств) анимации. Например shine эффект для кнопки, когда проносится полупрозрачный элемент под наклоном, создающий эффект сияния. Если делать транзишеном - после убирания мыши с элемента, сияющий блок поедет обратно. А с кейфреймом он при каждом наведении будет 1 раз проезжать слева направо. https://cssanimation.rocks/pseudo-elements/ - вот собственно пример.
Транзишены соответственно юзаются когда, например, надо поменять свойства элемента при наведении или добавлении класса. При этом при добавлении/убирании разных классов можно настраивать везде свои удобные тайминги/задержки на то, как свойства будут меняться. В общем удобная декларативность во по всем фронтам.
Ах да, еще кейфреймы нужны когда необходимо врубить анимацию на старте страницы, не прибегая при этом к js.
https://cssanimation.rocks/transition-vs-animation/ - вот это еще можете чекнуть.

Answer 2

[Марк]

Транзишен лучше, именно из-за «когда убираю курсор, все без анимации». Вообще кейфреймы сделаны для более сложных вещей, скажем, когда нужно по вейпоинтам что-то гонять (по сложному маршруту т.е.), и другие нелинейные штуки делать. Если в кейфреймах только 0% и 100%, это оверкилл.

Отделить в коде можно чисто визуально, если это важно.