CODEWITHSUNDEEP
htmlcssanimationcss-selectorscss-animations
Lechaq
Lechaq

Reputation: 55

how to stop animation from wexecuting too early

I'm trying to use animate.css 's fadeInUp function but it keeps working prematurely. At first I did not think it worked, then I refreshed the page and it animated but only when I hit the refresh button. Here's the code

 <html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<div class="grid mt-4 claim animate__animated animate__fadeInUp"></div>
</body>
</html>

I also tried decreasing the speed of the animation, which it showed I did, only that it still worked just when I hit the refresh button and the page is loading. So what I want to know is how to make the animation work after loading not during.

Upvotes: 1

Views: 111

Answers (1)

Rounak Khan
Rounak Khan

Reputation: 21

Overwrite the animation-delay attribute like:

animation-delay: 6s; (here 6s means animation will start after 6 seconds)

Use animation-duration to change the speed of the animation liuke:

animation-duration: 10s; (here 10s means animation will complete in 10 seconds) Thanks.

Upvotes: 1

Related Questions