CSS3动画库animate.css介绍和使用

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使用方法

1
<div class=“animated bounce” id=“myAnimate”></div>

使用起来非常的简单,仅仅只需要给元素加上 class ,刷新页面,就能看到动画效果了。animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。

也可以通过 JavaScript 或 jQuery 给元素添加这些 class,比如:

1
<div id=“myAnimate”></div>
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/

附:超简单实用的回到顶部

站长QQ:739696033 | 微信:bing-0719:Bcoder资源网 » CSS3动画库animate.css介绍和使用


扫描二维码关注微信公众号:“bcoder-cn 声明:本站内容部分来自互联网,仅供交流学习之用,请勿作商业用途,版权归原作者所有。如果有侵犯到您的权益,请提供相关证明联系本站删除,谢谢合作!
赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址