animate-css/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: how to animate in css

<style>
.myclass{
  background:red; /*DEFAULT VALUE*/
  animation:colorchange 1s; /*ANIMATION PROPERTY [name, time]*/
}
@keyframes colorchange{
  from{background:red} /*DEFAULT VALUE*/
  to{background:blue} /*CHANGING VALUE*/
}
</style>
<body>
<div class="myclass"> ELEMENT </div>
</body>

Tags:

Css Example

Recent Posts