animation not delaying
Hey, In this example, the
slide-in animation occurs first making the div containing the text slide in from off the page (it's inside of a div as there will be more content). After the animation has finished i'd like the levitate animation to occur which activates on the span inside the h1 I've set an animation-delay on the levitate animation however the start of it occurs before the delay and the end occurs after the delay, could anyone please explain why this happens? Thank you in advance.
https://codepen.io/deerCabin/pen/poXJQpO8 Replies
it's working, the delay is doing it's thing
is it supposed to be inline with the header, until after it animates to the end?
Oh I see, how would I make it so the animation doesn’t start at all until the other finishes?
either mess about with times, or start the other animation with javascript
ah okay, thank you
you're welcome
Create a custom property and use it for both the animation duration and the animation delay.
I see that you are using a 0.02s time difference. You can use a calc on the custom property.
ah that seems to do it, thank you. I realized i was doing the delay too long i think as well and i needed to not start the animation from the negative translate but from the neutral position, then it stays inline before it activates.