Промяна на напредъка на CSS3 анимация от JavaScript - javascript, css3, css-анимации

Чудя се дали е възможно да се манипулира "прогреса" на CSS3 анимация. Нека кажем, че имате следното css:

#myBox {
animation: fadein 2s ease-in-out 0 1 forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Сега, след като страницата се зареди, #myBox ще има opacity: 0; и след 2 секунди ще го има opacity: 1;, Мога ли по някакъв начин "манипулирам" напредъка на анимацията чрез JavaScript? Кажи, че искам да стартирам анимацията на 50%, така че при зареждането на страницата ще бъде opacity: 0.5; и след 1 секунда има opacity: 1;

Имате ли представа как да направите това?

Отговори:

Просто сменете ключовите кадри, например:

//this will start at 0.5 and keep it half way (1 second) and then aniate the fade to 1

@keyframes fadein {
0% {
opacity: 0.5;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

//you can do all sorts like blinking etc

@keyframes fadein {
0% {
opacity: 0.5;
}
30% {
opacity: 1;
}

50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}