Как в css задать два разных времени транзишена для двух теней?

Question

Как в css задать два разных времени транзишена для двух теней? чтобы две тени начали анимироваться одновременно, но продолжительность их анимации была разная?

  .game-item {
    transition box-shadow 0.3s, box-shadow 1s
  }

  .game-item:hover {
    box-shadow inset 0 0 0 0.15em blue, 0 0.5em 1em red
  }

чтобы первая тень появлялась за 0.3 секунды а вторая за 1 секунду

Answer 1

очевидный ответ: ни как, синтаксис css настолько убог что не позволяет описать это, и нужно делать костыли, врапперы, javascript, но вдруг кто-то умудрился сделать это на чистом css? =)
Алексей Соснин

Не правда, нисколько синтаксис css не убог. Это решается, например, простой анимацией с помощью правила @keyframes. Смотрите пример. Обе анимации начинаются одновременно. Анимация появления вашей первой тени длится 0.5s, а второй 3s. Может показаться, что анимация появления второй тени запаздывает (начинается не одновременно с первой), но это вовсе не так, так как ее продолжительность превышает первую в три раза. Поэтому создается такое ложное ощущение.

...А ДИЗЛАЙКАЕТ МЕНЯ...
Алексей Соснин

P.S. Алексей Соснин, читал в Вашем вопросе все Ваши оскорбления в мой адрес. Простите, но Вы не правы. Как я Вам и писал в комментариях, я никогда никому не ставил и не ставлю минусы. Это касается ответов. Что касается вопросов, то это бывает очень даже крайне редко. И кстати, Вашему вопросу и Вашему ответу я минусы не ставил, и это легко проверить. Поэтому, пожалуйста, постарайтесь впредь, оставляя свои комментарии, не быть столь эмоциональным в своих высказываниях, не употреблять ненормативную лексику, а тем более не оскорблять участников сообщества. Благодарю за понимание!

.game-item {
  box-sizing: border-box;
  margin: 40px auto;
  width: 100px;
  height: 100px;
  background-color: pink;
}

.game-item:hover {
  animation: shadow 3s forwards;
}

@keyframes shadow {
  0% { box-shadow: 0 0 0 0em blue, 0 0 0 0em red; }
  15% { box-shadow: 0 0 0 1em blue, 0 0 0 1em red; }
  100% { box-shadow: 0 0 0 1em blue, 0 0 0 4em red; }
}

<div class="game-item"></div>

Answer 2

Очевидный ответ: ни как. Семантика css достаточно убога и не позволяет описать это, и нужно делать костыли, врапперы, javascript. Css не позволяет задать разный транзишен для множественных свойств, по этому транзишен для свойства box-shadow применяется глобально, сколько бы там не было теней.

Вот костыль с псевдоклассом:

.game-item {
	margin: 40px auto;
	width: 100px;
	height: 100px;
	background-color: pink;
	position: relative;
	transition: box-shadow 3s;
}

.game-item:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	transition: box-shadow 0.5s;
}

.game-item:hover {
	box-shadow: 0 0 0 4em red;
}

.game-item:hover:before {
	box-shadow: 0 0 0 1em blue;
}

<div class="game-item"></div>

БЛОГ НА HUSL

Как в css задать два разных времени транзишена для двух теней?

Ответы (2 шт):