xxxxxxxxxx
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
xxxxxxxxxx
//add it directly to your webpage using a CDN:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
xxxxxxxxxx
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
xxxxxxxxxx
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" referrerpolicy="no-referrer" />
xxxxxxxxxx
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 3s; /* don't forget to set a duration! */
}
xxxxxxxxxx
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
}