Как сделать более плавную анимацию?

Question

[Korifa]

Как сделать так, чтобы красный цвет двигался плавнее ?
https://codepen.io/Korifa/pen/BGaNQe"
И еще вопрос: я видел на сайтах анимация срабатывает когда посетитель прокручивает страницу до этого места (места с анимацией) это через js делают какое-то событие ?
Спасибо

Answer 1

[Aleksey Solovyev]

1. Вы хотите анимировать border-bottom? Как Вы себе это представляете? Почитайте про анимацию хоть основы какие-то
Ваша анимация: jsfiddle.net/vnrkbx75/1

2. Это делается на JS Вами самим по событию scroll или wheel . Определяете положение элемента и позицию скролла. Дальше какое-то событие, если положение элемента дошло до определенной точки. Либо используйте готовую библиотеку: https://scrollrevealjs.org/

Comments

[Korifa]

а почему нельзя ?
там же есть ссылка на список свойств
https://developer.mozilla.org/en-US/docs/Web/CSS/C...

вообще я сначала сделал блок высотой несколько пикс и анимировал фон, но потом решил с бордер попробовать

[Aleksey Solovyev]

1. Бессмысленно
   
2. Бесконтрольно
   
3. Бесплавно(не знаю как с бес назвать)
   
4. ... тут еще пара тройка бес пунктов...
   

Не знаю как ответить Вам.... Вы можете хоть height анимировать, который как и border вызовет перерасчет DOM link
В общем. не надо анимировать бордер. Старайтесь использовать: opacity, transform, которые дадут Вам больше контроля и производительность.