animation动画库 + animation用法

一. 动画库

1. animation.css

https://daneden.github.io/animate.css/

简单使用时，f12 审查元素 .cls 就可以查找对应的animation。

这个库最简单。

2. hover.css 

http://ianlunn.github.io/Hover/

f12审查元素，选中：hover伪类，就可以查看具体animation。

这个动画库更加全面一些，更丰富！主要针对hover效果。

更多hover效果网站（不一定使用animation完成的）：

• https://codepen.io/honglio/pen/FKyxG/

这个网站是 after伪类做的

 

3. magic.css

http://www.9iweb.com.cn/index.php/effects/resource/effects_id/3005.html

f12 审查元素 .cls 就可以查找对应的animation。

这个库主要是 针对图片（头像avatar）变换。

4. Effect.css

http://www.gbtags.com/gb/linkviewer/3147.htm

Modal/Button/List/Caption/Tab 场景更多。

这个网站真的太强大了，就是没找到怎么快速复制demo的方法。

5.更多网站：

https://www.aliyun.com/jiaocheng/677667.html

 

二. animation的用法。

1. 基本属性

animation: name duration timing-function delay iteration-count direction;

  name:要自己定义： @keyframes name{};

2. animation-fill-mode / steps

 我的理解就是 一个雪碧图 animation 按照steps变换background;

重点:

•         一切都是反的！start不是开始，而是结束；end不是结束，而是开始。

•     step-start和step-end是steps()功能符简化关键字，注意，是step-*，step，后面没有s。

  其中，step-start等同于steps(1, start)，step-end等同于steps(1, end)或者steps(1)。

 详细请看 张鑫旭博客 https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

 其中不错的demo：https://codepen.io/jackpan/pen/JZyXdM

3. animation 循环的时候，首尾跳动的情况

解决：使 结束 动画 与 开始 动画 相同