Intento hacer una transición suave del logotipo desde el centro de mi navegador hasta la esquina superior izquierda después de que mi temporizador de intervalo establecido haya terminado 1 segundo.
¿Cuál es el mejor enfoque para esto?
Código actual a continuación.
var timesRun = 0; window.onload = loader() function loader(){ var newinterval = setInterval(function(){ timesRun += 1; if(timesRun === 1){ clearInterval(newinterval); moveLogo(); } }, 1000); } function moveLogo(){ // ???????????? const logo = document.querySelector('.box') logo.className = 'left' logo.style.transition = 'all 0.5s'; logo.style.transform = 'translate(0%, 0%)'; } .box { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; display: flex; align-items: center; justify-content: space-around; width: 220px; height:80px; color: green; border: 1px solid black; }; <div class="box"></div> window.onload = loader() function loader() { setTimeout(function() { moveLogo(); }, 1000); } function moveLogo() { document.querySelector('.box').classList.add('move-logo'); } .box { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; display: flex; align-items: center; justify-content: space-around; width: 220px; height:80px; color: green; border: 1px solid black; } .move-logo { left: 0; top: 0; margin: 0; transition: left 1s, top 1s, margin 1s; } <div class="box"></div> Sería bueno revisar la forma en que está centrando este <div> . Particularmente trato de evitar la position: absolute , pero eso dependerá de su caso.
Edición 1:
Otra opción es usar CSS puro, sin JavaScript.
.box { position: absolute; top: 0; left: 0; margin: 0; display: flex; align-items: center; justify-content: space-around; width: 220px; height:80px; color: green; border: 1px solid black; } .move-logo { animation-name: move-from-center; animation-duration: 2s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-delay: 1s; animation-fill-mode: backwards; } @keyframes move-from-center { 0% { left: 50%; top: 50%; margin: -50px 0 0 -100px; } } <div class="box move-logo"></div>