Animacja CSS w JavaScript

Question

Witam. Posiadam taki kod w javascripcie:

document.getElementById("Obrazek").style.opacity = 1;
document.getElementById("Obrazek").style.transitionDuration = "1s";
document.getElementById("Obrazek").style.top = "10%";
document.getElementById("Obrazek").style.left = "50%";

Dlaczego opacity też trwa 1 sekundę, skoro ustawiłem go przed transition duration? Jak zakomentuję linijkę z transitionDuration to obrazek pojawia się od razu, ale nie ma animacji. Natomiast jak zostawię tak jak jest to mam animację, ale obrazek nie pojawia się od razu, tylko trwa to 1 sekundę.

Answer 1

Zamiast właściwości transitionDuration spróbuj

document.getElementById("Obrazek").style.transition = "top 1s, left 1s";