The following setup (see below) animates the div on page load using jQuery, but fails in vanilla JavaScript, in that it gives me the animated state without the animation. I don't wand to use keyframes or a delay, and nothing I tried in JS worked.
Here's the working version, with 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>Here's the problematic version, with 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>For the vanilla JS version you might need to wait for the browser to give you the next animation frame using 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>