Zmień postęp animacji CSS3 według JavaScript - javascript, css3, css-animations

Zastanawiam się, czy możliwe jest manipulowanie "postępem" animacji CSS3. Powiedzmy, że masz następujące css:

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

Teraz po załadowaniu strony, #myBox będzie miał opacity: 0; i po 2 sekundach będzie opacity: 1;. Czy mogę w jakiś sposób "manipulować" postępem animacji przez JavaScript? Załóżmy, że chcę rozpocząć animację o 50%, więc przy ładowaniu strony będzie opacity: 0.5; i po 1 sekundzie ma opacity: 1;

Masz pomysł, jak to zrobić?

Odpowiedzi:

Po prostu zmień klatki kluczowe, na przykład:

//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;
}
}