http://my.oschina.net/yangyan/blog/601573
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.
基本的使用方法
引入css文件到 <head> 标签中
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
给你想让执行动画的元素的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
例子:
<h1 class="animated infinite bounce">Example</h1>
查看所有的动画效果
https://daneden.github.io/animate.css/
分享到:
相关推荐
总之,Animate.min.css是一个强大的CSS动画库,它为开发者提供了大量现成的动画效果,使得在网页设计中实现动态视觉效果变得简单快捷。无论你是前端新手还是经验丰富的开发者,Animate.css都是一个值得信赖的工具,...
Animate.css 是一个强大的预设CSS3动画库,它为开发者提供了丰富的动画效果,极大地简化了在Web项目中添加动态效果的工作。这个库包含了各种各样的动画类型,如淡入淡出、滑动、旋转、缩放等,适用于按钮、图标、...
Animate.css是一个CSS3动画库,它使得在网页上添加复杂的动画变得简单快捷。通过在HTML元素上直接应用预定义的类名,就可以轻松实现各种动态效果,如淡入淡出、滑动、旋转、放大缩小等。这极大地简化了开发者的工作...
**CSS3 动画库 animate.css 深度解析** CSS3是现代网页设计的关键技术之一,它提供了许多增强用户体验的特性,其中动画效果尤其引人注目。animate.css是一个非常强大的开源CSS3动画库,它集合了大约50种预定义的...
Animate.css 是一个强大的开源CSS动画库,它提供了一系列预先定义好的动画效果,使得开发者无需从零开始编写复杂的CSS代码,就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计,提升用户体验,吸引用户...
在本项目中,我们关注的是一个使用Animate.css动画库实现的全屏滚动解决方案,特别针对Vue.js框架,可用于移动端和PC端的应用开发。Animate.css是一个强大的、预定义的CSS动画库,可以为网页添加各种炫酷的动画效果...
fullpage.js结合animate.css实现滚屏动画,每段代码都加有详细注释 文章地址:https://blog.csdn.net/cplvfx/article/details/80649574
"animate.css"则是一个预定义的CSS3动画库,包含了大量的动画效果,如淡入淡出、滑动、旋转等。开发者可以通过简单地添加类名到HTML元素上,就能轻松实现各种炫酷的动画效果。这些动画效果都是基于现代浏览器支持的...
Animate.css 是一个强大的、易于使用的库,它包含了大量的预定义CSS动画效果,可以轻松地为网页元素添加动态效果。这个库极大地简化了开发者的工作,使他们无需深入学习复杂的CSS3动画语法,就能创建出令人眼前一亮...
Animate.css 是一个流行的开源 CSS 动画库,它极大地简化了在网页中添加各种炫酷动画的流程。这个库包含了多种预定义的动画效果,可以让开发者无需从零编写复杂的 CSS3 动画代码就能实现丰富的视觉体验。让我们深入...
一个css大神制作的成品的动画库,对控件动画有效,我做了测试和动画效果注释汉化。因为不是自己的东西,就不要分了,当然百度的静态资源库应该也是有的,不过对于初学者,注释还是很有必要的。截止2015年12月1号的...
【animate.css】是一种开源的CSS动画库,它提供了一系列预定义的动画效果,使得开发者能够轻松地在网页中添加各种动态效果。这个标题"会动的banner animate.css"表明我们将探讨如何利用animate.css来创建一个具有...
Animate.css拥有多款文字特效的css3动画库效果源码,是一段拥有数十款文字特效的css3动画库代码,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出...
animate.css则是一个预设动画库,提供了大量可立即使用的CSS动画效果。 首先,让我们从`index.html`文件开始。这是网页的核心文件,它包含了所有页面元素的结构。在这个项目中,`index.html`会包含必要的HTML标记来...
这是一款效果非常炫酷的基于SVG和animate.css的炫酷文字动画效果。该效果中的文字和边框路径都使用SVG来制作,然后通过animate.css和walkway.js分别制作文字动画和SVG路径动画。
janimate是一款非常实用的基于Animate.css的jQuery动画特效插件。该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果。通过该插件可以简化Animate.css的使用,非常方便。
综上所述,animate.css是一个强大而易用的CSS3动画库,它极大地简化了开发者在网页设计中添加动态效果的过程。通过熟练掌握animate.css的使用,您可以快速实现各种酷炫的动画效果,提升网站的整体视觉体验。
总的来说,"unigui_animate.css按钮三角变换动画"涉及到的关键技术包括Unigui的HTML模板渲染、CSS样式定义、animate.css动画库的使用以及JavaScript事件监听和DOM操作。通过这些技术的结合,我们可以创建出具有视觉...
在这个教程中,我们将深入探讨animate.css,一个强大且易用的开源CSS动画库,它是前端开发者实现各种炫酷动画效果的利器。 animate.css是一个预定义的CSS动画集合,它包含了一系列现成的、跨浏览器的动画效果,如...
Animate.css 是一个强大的开源 CSS3 动画库,它为开发者提供了一系列预先设计好的动画效果,使得在网页设计中添加动态元素变得简单易行。这个库包含了许多有趣的动画,如抖动、闪烁、弹跳等,可以极大地提升用户体验...