付费节点推荐
免费节点
节点使用教程
animate.css是一个来自国外的 CSS3 动画库，它预设了引起弹跳（bounce）、摇摆（swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fade）、滑动（Sliding）、光速（lightspeed）、缩放变焦（Zoom）、翻滚（roll）等多达 70 多种动画效果，借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
animate.css使用方法
1、引入文件animate.css
|
1
|
<link rel="stylesheet" href="animate.min.css">
|
2、animate.css使用方法
使用起来非常的简单，仅仅只需要给元素加上 class ，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
|
1
2 3 |
#(function(){
$('#myAnimate').addClass('animated bounce'); }); |
如果动画是无限播放的，可以添加 class infinite。
在css3中， 第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程。所谓的状态是指大小、位置、颜色、变形（transform）等等这些属性，过渡（transition）动画只能定义首和尾两个状态。
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
第二种叫做关键帧（keyframes）动画。关键帧动画有点像falsh动画的原理，可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
animated.css官网：http://daneden.github.io/animate.css/
未经允许不得转载：Bcoder资源网 » CSS3动画库animate.css介绍和使用
评论前必须登录！
登陆 注册