Delay a CSS transformation with setTimeout()



This is the page in question:
I am trying to delay some CSS from loading for 5 seconds on page load. The following is my best effort at Javascript, but cannot get it to work.


function delayCss() {
  var targetDiv = document.getElementById("panel-942-1-0-0").getElementsByClassName("so-panel widget widget_sow-image panel-first-child panel-last-child")[0];
targetDiv.classList.add("animated lightSpeedIn");

/*alert('I am here!'); - BTW this basic alert script works on page load*/


function load_js_assets() {
    if( is_page( 942 ) ) {
        wp_enqueue_script('my-js', '', array('jquery'), '', false);

add_action('wp_enqueue_scripts', 'load_js_assets');

The CSS is called from:

<link rel='stylesheet' id='1887-css'  href='' type='text/css' media='all' />

Via Wordpress Custom CSS & JS plugin and assigned CSS ID and CLASSES in the page code using pageBuilder. This plugin sources code I placed in 1887.css and makes the ‘lightSpeedIn’ effect happen, and its working on page load ATM, but I want to delay the effect until 5 seconds after page load. (Please see comment re alert(‘I am here!’); above in first code block.)

Can’t get it to work.
Any help would be greatly appreciated.


Why don’t you just use CSS for this task? :rolleyes:

         animation-delay: 5s;



Ok, what sort of CSS delay property would be available to achieve what I want to do?


Hi there Argent,

here is a basic example…

<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>simple delayed animation</title>

<!-- <link rel="stylesheet" href="screen.css" media="screen"> -->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;

#box {
    position: relative;
    width: 6em;
    height: 6em;
    border: 1px solid #000;
    border-radius: 50%;
    margin-left: 50%;
    background-color: #080;
    box-shadow: 0.25em 0.25em 0.35em rgba( 0, 0, 0, 0.4 );
    color: #fff;
    text-transform: uppercase;
    animation: dosomething 2s 5s ease-in-out forwards;

#box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );

@keyframes dosomething {
  0% {  margin-left: 50%;
        transform: rotateY( 0deg );
100% {  margin-left: 0;
        transform: rotateY( 360deg );


 <div id="box">




coothead, Eternally grateful Sir :grin:
I spent a whole day trying to wrangle JS code I know little about. CSS is vast isn’t it?
Would appreciate your thoughts on how the page works for you now:


Well, it appears that…

               animation-delay: 7s;

…has definitely worked it’s magic for you. :sunglasses:

        CSS: 1     JavaScript: 0



That is fully in line with my policy, that the best JavaScript is the JS code that doesn’t need to be written. :sunglasses:


I really have to admit, though, that I still enjoy tinkering with the beast. :biggrin: