Как изменить значение без анимации?

Question

[Егор Антропов]

Есть элемент, в этом элементе две анимации с шириной.
У элемента прописано: transition: width 5s linear 0s

1. Идёт от 0 до 100% за 5 секунд (через добавление класса с шириной 100%)
2. Идёт от 100% 0 моментально

Как сделать чтобы во второй раз это было моментально?

Comments

[Антон]

Ничего не умею

И вставлять пример кода, тоже, видимо, не умеете?

[Егор Антропов]

Антон,

.bg-line
	position: relative
	height: 10px
	width: 100%
	border-radius: 5px
	background: #e6e6e6
.go-line
	height: 100%
	width: 0
	border-radius: 5px
	background: #cc8e93
	transition: width 5s linear 0s
	&.active
		width: 100%

<div class="line-and-nav">
	<div class="bg-line">
		<div class="go-line" id="go-line"></div>
	</div>
</div>

$('.fullscreen-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
	var goLine = document.querySelector('#go-line');
	goLine.classList.add('active');
});

[Егор Антропов]

Антон, Делаю такую полосу

[RAX7]

Егор Антропов,

.go-line.active {
  animation: anim 5s forwards linear;
}

@keyframes anim {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

Answer 1

[profesor08]

Для добавляемого класса задай другую транзицию.