CSS动画在线生成

使用CSS动画在线生成工具，您可以选择、测试和生成跨浏览器的CSS动画以用于您的Web项目。

点击侧边栏选项查看动画效果 »

          @-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动画生成器工具？

需要以下2个步骤即可生成您先要的css动画代码。

  1. 尝试右侧面板中根据含义分类的各种动画，然后选择适合您主题的元素。
  2. 单击带下划线的蓝色按钮复制 CSS，然后通过匹配类选择器将其应用到您的 CSS 文件。