Как реализовать key-frames?

Question

[Виталий]

Как правильно написать анимацию, чтоб боковые полоски от слова Beer выезжали от него. Сама анимация должна быть с небольшой задержкой. В момент задержки полоски не должно быть видно. Пробовал "animation-direction" и аlternative, и reverse. Оно все равно выезжает не так как надо.
И как быть с opacity?
<h1><span>Beer</span></h1>

span
	position: relative
			&:before
				content: ''
				position: absolute
				background-color: $textColor
				width: 24rem
				height: 0.4rem
				right: -25rem
				top: 0
				bottom: 3px
				margin: auto
				opacity: 0
				animation-name: top-anim
				animation-duration: .5s
				animation-timing-function: linear
				animation-direction: unset
				animation-delay: .7s

			&:after
				@extend span:before
				right: auto
				left: -25rem
@keyframes 'top-anim'
	from
		width: 0
	to
		width: 16rem
<img src="https://habrastorage.org/files/3d7/cc2/c2d/3d7cc2c2d13e43c0bf9ba7d4e13ce1cf.png" alt="image"/>

Answer 1

[alvvi]

Не очень понятен вопрос, и зачем вы вообще используеет animation-direction. Animation-direction: alternate выполнет анимацию, а потом запускает ее в обратном направлении. Reverse просто запускает обратную анимацию. За задержку анимации отвечает animation-delay.

Какого именно эффекта вы хотите добиться? Сейчас у вас зачем-то задан width: 24rem у полосок, а потом вы этот width обнуляете и увеличиваете его до 16rem. Opacity здесь, по сути, вообще не нужна, просто задайте изначальный width как 0rem и применяйте ваши кейфреймы.

Comments

[Виталий]

я хочу добиться того, чтоб эти полоски выезжали от слова Beer. Чтоб изначально их не было видно, потом выполнялась анимация, и они оставались. А получается, если сделать width: 0, а в кифреймс описать анимацию от 0 до 24rem, то она выполняется, но после окончания анимации полоски пропадают. И сама анимация не в ту сторону работает. Полоски выезжают к слову, а не от слова

[Виталий]

хотя нет. Я решил проблему, чтоб полоска оставалась после анимации добавлением свойства animation-fill-mode: forwards
Но вот направление не совсем понял

[alvvi]

Виталий: спозиционируйте их правильно и все заработает. Направление - это не направление в прямом смысле слова, это то, как идет анимация по кейфреймам, от начала к концу или от конца к началу. Задайте элементам конечный width и позицию, которую хотите получить, а затем попробуйте наложить кейфреймы.