欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Animate.css 纯CSS动画库_html/css_WEB-ITnose

程序员文章站 2022-03-17 09:40:49
...
github上的地址是: https://daneden.github.io/animate.css/


Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

基本的使用方法

  1. 引入css文件到

    标签中

  2. 给你想让执行动画的元素的class添加animated. 你还可以添加 infinite这个样式让动画无限循环.

  3. 最后你给元素添加下面的一个class,就可以实现不同的动画效果:

    • bounce
    • flash
    • pulse
    • rubberBand
    • shake
    • headShake
    • swing
    • tada
    • wobble
    • jello
    • bounceIn
    • bounceInDown
    • bounceInLeft
    • bounceInRight
    • bounceInUp
    • bounceOut
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRight
    • bounceOutUp
    • fadeIn
    • fadeInDown
    • fadeInDownBig
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightBig
    • fadeInUp
    • fadeInUpBig
    • fadeOut
    • fadeOutDown
    • fadeOutDownBig
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightBig
    • fadeOutUp
    • fadeOutUpBig
    • flipInX
    • flipInY
    • flipOutX
    • flipOutY
    • lightSpeedIn
    • lightSpeedOut
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • hinge
    • rollIn
    • rollOut
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp

例子:

Example

查看所有的动画效果