0 1 5 6 - Why AnimateCss
本帖最后由 不二如是 于 2021-8-13 18:50 编辑http://xxx.fishc.com/forum/201708/10/081357e7wz4p3iieywffei.png
Animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果。
但还是建议看看 animate.css 的代码，你能从中学到很多东西哦～
代码包你可以去下方Github下载，也可以：
接下来都使用min版压缩格式，左边的完整版自行去学习～
只要你使用现代浏览器，基本上都支持，如果你偏要用iE，随你开心
(出了问题也不要来问，拒绝回答哦，因为IE.的bug俺也不懂，也不想懂)
推荐阅读：**** Hidden Message *****
使用方法
1、引入文件
<link rel="stylesheet" href="animate.min.css">
2、HTML 及使用
<div class="animated flash" id="tst"></div>
给元素加上 class 后，刷新页面，就能看到动画效果了。
animated 类似于全局变量，它定义了动画的持续时间；
flash 是动画具体的动画效果的名称，你可以选择任意的效果。
如果动画是无限播放的，可以添加 class infinite。
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如
隔壁推荐：0 1 6 0 ★ Why #jQuery
$(function(){
$('#tst').addClass('animated flash');
});
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){
$('#tst').addClass('animated flash');
setTimeout(function(){
//移除特效，让元素可以被看见
$('#tst').removeClass('flash');
}, 1000);
});
默认设置也许有些时候并不是我们想要的。
所以你可以进入animate.css进行相应修改：
#tst {
animate-duration: 3s; //动画持续时间
animate-delay: 0.5s; //动画延迟时间
animate-iteration-count: 3; //动画执行次数
}
前期铺垫完成，准备开启奇妙之旅吧{:10_297:}
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762
Github代码下载：鱼C传送门
1
页:
[1]