La siguiente configuración (ver a continuación) anima el div en la carga de la página usando jQuery, pero falla en JavaScript estándar, ya que me da el estado animado sin la animación . No quiero usar fotogramas clave o un retraso, y nada de lo que probé en JS funcionó.
Aquí está la versión de trabajo, con jQuery:
jQuery(function($) { $(document).ready(function() { $("#new-selector").addClass("animated-selector"); }); }); #new-selector { background: #3a88fe; width: 50px; height: 50px; transition: transform 500ms ease; } #new-selector.animated-selector { background: orange; transform: translate(75px, 20px) scale(1.5); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="new-selector"></div>Aquí está la versión problemática, con vanilla JS:
document.addEventListener('DOMContentLoaded', function() { document.getElementById('new-selector').classList.add('animated-selector'); }); #new-selector { background: #3a88fe; width: 50px; height: 50px; transition: transform 500ms ease; } #new-selector.animated-selector { background: orange; transform: translate(75px, 20px) scale(1.5); } <div id="new-selector"></div>Para la versión Vanilla JS, es posible que deba esperar a que el navegador le proporcione el siguiente cuadro de animación mediante requestAnimationFrame :
document.addEventListener('DOMContentLoaded', function() { requestAnimationFrame(() => document.getElementById('new-selector').classList.add('animated-selector')) }); #new-selector { background: #3a88fe; width: 50px; height: 50px; transition: transform 500ms ease; } #new-selector.animated-selector { background: orange; transform: translate(75px, 20px) scale(1.5); } <div id="new-selector"></div>