How to delay the start of a transformaton by 2 sec

[Hernando]

I have a transformation that works:

transform: perspective(700px) rotateY(20deg);
transition: all 1.6s;

This is all I had to enter into the custom CSS Main Element section of an image module in Divi.

I want it to wait 2 seconds before it initiates.

How do I do that?

Edited February 24, 2019 by Hernando

[Ingolme]

There's a transition-delay property https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

[Hernando]

That worked. BUT I neglected to tell you the ENTIRE story, my fault. Sorry

There's a second part of my effect, hover. When the mouse hovers over the canted image, the image returns to normal while being held. Let go of the mouse and the image goes back to canted.

Now, with the delay, the hover is no longer immediate but holds 2 seconds.

I want the image to move nearly instantly with the hover. I tried adding a second time delay — transition-delay: 1s; 250ms — but that didn't seem to do it.

Here's the ENTIRE code I entered. Again, sorry for not being correct the first time.

Main Element CSS (default):
transform: perspective(700px) rotateY(45deg);
transition: all 1.6s; transition-delay: 1s: 250ms

Main Element CSS (hover):
transform: perspective(700px) rotateY(0deg);
 

Edited February 25, 2019 by Hernando
forgot detail

[Funce]

I had a look around. This probably best answers it:

https://stackoverflow.com/questions/3627135/is-it-possible-to-set-different-duration-delay-for-transform-options

 

You'll need to nest the elements if you want differing transition options, because transform is a single animation, and therefore grouped together for the 'transition', you won't be able to normally get different transition options.