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/poXJQpO
8 Replies
ἔρως
ἔρως6mo ago
it's working, the delay is doing it's thing
No description
ἔρως
ἔρως6mo ago
is it supposed to be inline with the header, until after it animates to the end?
No description
No description
snxxwyy
snxxwyyOP6mo ago
Oh I see, how would I make it so the animation doesn’t start at all until the other finishes?
ἔρως
ἔρως6mo ago
either mess about with times, or start the other animation with javascript
snxxwyy
snxxwyyOP6mo ago
ah okay, thank you
ἔρως
ἔρως6mo ago
you're welcome
Choo♚𝕂𝕚𝕟𝕘
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.
snxxwyy
snxxwyyOP6mo ago
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.
Want results from more Discord servers?
Add your server