xxxxxxxxxx
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" referrerpolicy="no-referrer" />
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
<style>
.myclass{
background:red; /*DEFAULT VALUE*/
animation:colorchange 1s; /*ANIMATION PROPERTY [animation name, time duration]*/
}
@keyframes colorchange{
from{background:red} /*DEFAULT VALUE*/
to{background:blue} /*CHANGING VALUE*/
}
</style>
<body>
<div class="myclass"> ELEMENT </div>
</body>
xxxxxxxxxx
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
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;
}