css/animate.css code example
Example 1: 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 2: 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 3: animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />Example 4: animate.css
$ npm install animate.css --saveExample 5: animate.css
$ yarn add animate.cssExample 6: animate.css
.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! */
}