CSS Animation Generator

With this tool, you can choose, test, and generate cross-browser CSS animations for use in your web projects. (bookmark for quick reuse)

Click the sidebar options to animate »

      @-webkit-keyframes bounce {
        from,
        20%,
        53%,
        to {
          -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }

        40%,
        43% {
          -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
          transform: translate3d(0, -30px, 0) scaleY(1.1);
        }

        70% {
          -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
          transform: translate3d(0, -15px, 0) scaleY(1.05);
        }

        80% {
          -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
          transform: translate3d(0, 0, 0) scaleY(0.95);
        }

        90% {
          -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
          transform: translate3d(0, -4px, 0) scaleY(1.02);
        }
      }
      @keyframes bounce {
        from,
        20%,
        53%,
        to {
          -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }

        40%,
        43% {
          -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
          transform: translate3d(0, -30px, 0) scaleY(1.1);
        }

        70% {
          -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
          transform: translate3d(0, -15px, 0) scaleY(1.05);
        }

        80% {
          -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
          transform: translate3d(0, 0, 0) scaleY(0.95);
        }

        90% {
          -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
          transform: translate3d(0, -4px, 0) scaleY(1.02);
        }
      }
      .animate__bounce {
        -webkit-animation-name: bounce;
        animation-name: bounce;
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
      }

Attention seekers

  • bounce
  • flash
  • pulse
  • rubberBand
  • shakeX
  • shakeY
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • heartBeat

Back entrances

  • backInDown
  • backInLeft
  • backInRight
  • backInUp

Back exits

  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp

Bouncing entrances

  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp

Bouncing exits

  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp

Fading entrances

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight

Fading exits

  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • fadeOutTopLeft
  • fadeOutTopRight
  • fadeOutBottomRight
  • fadeOutBottomLeft

Flippers

  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY

Lightspeed

  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft

Rotating entrances

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Rotating exits

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

Specials

  • hinge
  • jackInTheBox
  • rollIn
  • rollOut

Zooming entrances

  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp

Zooming exits

  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Sliding entrances

  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp

Sliding exits

  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

CSS Animations Generator is a simple tool that you can use to greatly improve an interface's UX, but it's important to follow some guidelines and not overdo it unnecessarily, which might deteriorate the user experience on your web things.

Some basic tips to use CSS animations in your web projects:

  • Do not animate an element just for the sake of it. Keep in mind that animations should make an intention clear and look meaningful adding to the overall user experience.
  • Entrances and exit animations should be used meaningfully like to modals or popups, to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.
  • Avoid animating large elements on the page as it won't bring much value to the user and will probably only cause distraction and confusion and the animations will look junky, adding to bad UX (user experience).
  • Infinite animations should be avoided as much as possible as they just distract your users from the main purpose and might annoy a good slice of them.
  • Check the initial and final state of your elements - use animation-fill-mode to control the states of an element before and after animation. The default value to "animation-fill-mode:" is "both", but you can change it according to your needs.
  • Always animate block or inline-block level elements. You can set an element to display: inline-block when animating an inline-level element.

It is recommended to bookmark it on your web browsers to quickly revisit and reuse it when needed for better productivity at work.

Please share these tools with your friends and colleagues. Also, it will be great if you can recommend these tools in your blogs if you have one. Thank You :-)

Follow these simple steps to get the best results with this tool.

Step 1 - Try various animations from the right-side panel categorized according to their meaning and select whatsoever suits your theme for the element.

Step 2 - Copy the CSS by clicking the blue underlined button and apply it to your CSS files by matching up the class selector.

Now, save this tool or bookmark it on your web browser to revisit it quickly when needed. Thank you!

webdevpuneet.com © 2021 | hosted by Bluehost (web hosting)