animate css code example
Example 1: animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
/*
==========================================
Animation Using Animate.css Library
==========================================
We can use these styling to apply animate.css using css:
animation: bounce;
animation-duration: 2s;
animation-iteration-count:
animation-delay: 1s;
Utility classes: (Animate.css comes packed with a few utility classes to simplify its use)
Always use "animate__animated" keyword to activate animation. Then we can use below classes to start animation.
animate__fadeIn animate__slow 2s animate__repeat-1 1 animate__delay-2s
animate__fadeInDown animate__slower 3s animate__repeat-2 2 animate__delay-3s
animate__fadeInLeft animate__fast 800ms animate__repeat-3 3 animate__delay-4s
animate__fadeInRight animate__faster 500ms
animate__fadeInUp
*/
Example 2: css animation
<style>
.my-element {
width: 100%;
height: 100%;
animation: tween-color 5s infinite;
}
@keyframes tween-color {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: red;
}
}
html,
body {
height: 100%;
}
<style>
<body>
<div class="my-element"></div>
</body>
Example 3: jquery animation
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
Example 4: how to animate in css
<style>
.myclass{
background:red;
animation:colorchange 1s;
}
@keyframes colorchange{
from{background:red}
to{background:blue}
}
</style>
<body>
<div class="myclass"> ELEMENT </div>
</body>
Example 5: animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
Example 6: animate.css
$ npm install animate.css --save