Jump to content

How to delay the start of a transformaton by 2 sec


Recommended Posts

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 by Hernando
Link to comment
Share on other sites

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 by Hernando
forgot detail
Link to comment
Share on other sites

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



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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...