Delay a CSS transformation with setTimeout()

JavaScript
,
1

This is the page in question: http://staging.gordon.server271.com/subscription-confirmation/
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.

my-js.js

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");
}

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

functions.php

function load_js_assets() {
    if( is_page( 942 ) ) {
        wp_enqueue_script('my-js', 'http://staging.gordondesign.com.au/wp-content/themes/sydney-child/my-js.js', array('jquery'), '', false);
    } 
}

add_action('wp_enqueue_scripts', 'load_js_assets');

The CSS is called from:

<link rel='stylesheet' id='1887-css'  href='http://staging.gordon.server271.com/wp-content/uploads/custom-css-js/1887.css?v=7275' 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.

2

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

         animation-delay: 5s;

coothead

3

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

4

Hi there Argent,

here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<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 );
     }
}
</style>

</head>
<body> 

 <div id="box">
  <span>box</span>
 </div>

</body>
</html>

coothead

5

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:
http://staging.gordon.server271.com/subscription-confirmation/

6

Well, it appears that…

               animation-delay: 7s;

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

        CSS: 1     JavaScript: 0

coothead

7

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

1 Like
8

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

coothead

3 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.