请记住我们的网址:3zcode.com。也就是“三只源码"

CSS3常用动画库-animate.css

源码 admin 2875℃ 0评论

简介

animate.css是单独的CSS文件,它来自国外,是一款强大的常用CSS3的动画库。

该动画库预设了诸如。抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常用的动画效果。

借助animate.css动画库,我们可以很轻易的构建动感十足的“超酷网站”,大大提升网站的交互能力。

兼容

因为是CSS3的动画库,所有兼容CSS3的浏览器,都可以顺利的渲染该CSS样式。能应用动画库的浏览器分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入CSS文件

<link rel="stylesheet" href="animate.min.css">

2、HTML 及使用CSS样式

<div class="animated bounce"></div>

由此,刷新网页便可看到动画效果。

 

进阶

如果要使动画无限播放,可以添加?class=”infinite”。

animate.css也可以和脚本结合使用,简单易用。

自定义animate.css预设的动画,通过修改CSS3样式属性,比如animate-duration(动画持续时间)、animate-delay(动画延迟时间)、animate-iteration-count(动画执行次数)。

 

 

转载请注明:三只源码 » CSS3常用动画库-animate.css

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

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