Css Animation

Animations can be powerful tools for engaging and delighting visitors on your site. They can make the loading experience more entertaining, direct the visitor’s eye to an important element on the page, and improve usability.

While rendering animations on the web isn’t new, the process is. Animation used to require JavaScript, which is considered one of the most difficult coding languages to learn, or Flash, an Adobe product that you have to pay a monthly fee to use. In the past decade, many developers have shifted away from JavaScript and Flash to using CSS for animations. Most already know CSS — plus it’s free!

Animate.css

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Install with npm:

    npm install animate.css --save

Import it into your file:

    import 'animate.css';

Or 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>

Basic usage

After installing Animate.css, add the class animateanimated to an element, along with any of the animation names (don't forget the animate prefix!):

    <h1 class="animate__animated animate__bounce">An animated element</h1>

Using @keyframes

Even though the library provides you a few helper classes like the animated class to get you up running quickly, you can directly use the provided animations keyframes. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.

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

watch on next blog.......

DP13 Creation