animate css

1<link
2    rel="stylesheet"
3    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
4  />
5

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
2

1yarn add animate.css // or npm install animate.css --save

1$ yarn add animate.css
2

1.my-element {
2  display: inline-block;
3  margin: 0 0.5rem;
4
5  animation: bounce; /* referring directly to the animation's @keyframe declaration */
6  animation-duration: 3s; /* don't forget to set a duration! */
7}
8

1$ npm install animate.css --save

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
2
3/* 
4==========================================
5    Animation Using Animate.css Library
6==========================================
7We can use these styling to apply animate.css using css:
8  animation: bounce;            
9  animation-duration: 2s;       
10  animation-iteration-count:    
11  animation-delay: 1s;
12
13Utility classes: (Animate.css comes packed with a few utility classes to simplify its use)
14
15Always use "animate__animated" keyword to activate animation. Then we can use below classes to start animation.
16
17  animate__fadeIn               animate__slow 	  2s          animate__repeat-1 	1         animate__delay-2s     
18  animate__fadeInDown           animate__slower 	3s          animate__repeat-2 	2         animate__delay-3s
19  animate__fadeInLeft           animate__fast 	  800ms       animate__repeat-3 	3         animate__delay-4s
20  animate__fadeInRight          animate__faster 	500ms
21  animate__fadeInUp
22*/