CSS Animation with Animate.CSS

3d Animation

How to use Aninate.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. Link to main website – animate.style

Adding animate.css stylesheet to WordPress website. Add the code below to your header.php file.


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

To use inline on website use the following, note you need to add the prefix class ‘animate__animated’ followed by ‘animate__’ and then the animation type.


<h1 class="animate__animated animate__bounce">Hello</h1>

You can also add the animations as keyframes below to the existing CSS classes. This makes it easier to integrate into an existing website.


.existingClass {
animation: bounce;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: 2; (this can be also set to infinite)
}

Here are some animate.css codes to try

bounce
bounceInUp
pulse
tada
heartBeat
fadeIn
fadeInLeft
fadeInRight
fadeInUp
fadeInDown
flipInX
flipInY
zoomIn
slideInDown
slideInUp
slideInLeft
slideInRight