Animate.css 纯CSS动画库_html/css_WEB-ITnose
程序员文章站
2022-04-16 15:33:48
...
github上的地址是: https://daneden.github.io/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.
基本的使用方法
-
引入css文件到
标签中 -
给你想让执行动画的元素的class添加animated. 你还可以添加 infinite这个样式让动画无限循环.
-
最后你给元素添加下面的一个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
查看所有的动画效果
下一篇: Java项目开发命名规范(动力节点整理)
推荐阅读
-
CSS3 3D旋转动画代码实例_html/css_WEB-ITnose
-
顶尖灵感库!专门收录世界知名品牌标准色的BrandColor_html/css_WEB-ITnose
-
纯CSS+DIV轻松解决对象在任何位置上水平对齐的问题_html/css_WEB-ITnose
-
帧动画Drawable Animation入门_html/css_WEB-ITnose
-
Animation动画详解(七)--ObjectAnimator基本使用_html/css_WEB-ITnose
-
一款纯css3实现的动画按钮_html/css_WEB-ITnose
-
高性能 CSS3 动画_html/css_WEB-ITnose
-
CSS分层动画可以让元素沿弧形路径运动_html/css_WEB-ITnose
-
数据库的那些章节比较重要_html/css_WEB-ITnose
-
纯CSS3超酷3D旋转立方体动画特效_html/css_WEB-ITnose