Проблемы с анимацией-лимелин ⇐ Html

[Anonymous]

У меня есть проблема с анимационной линейкой, она не дает мне возможности анимировать, когда я прокручиваю, и не дает мне достоверного свойства в CSS. < /p>


body {
margin: 0;
font-family: sans-serif;
background-color: #ccc;
height: 200vh;
}

* {
box-sizing: border-box;
}

div {
box-sizing: border-box;
}

.box {
background-color: #fff;
border: 3px solid #48e;
padding: 4px;
border-radius: 39px;
position: fixed;
width: 100%;
}

.barra {
padding: 40px;
background-color: #48e;
border-radius: 30px;
width: 10%;
animation-name: llenar-barra;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: scroll();
}

.barra:active {
animation-play-state: paused;
}

@keyframes llenar-barra {
from {
width: 0%;
}
to {
width: 100%;
background-color: #f33;
}
}< /code>

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/797 ... n-timeline