一，复习
[animation属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation) [demo1](https://www.w3school.com.cn/tiy/t.asp?f=css3_animation-direction) [demo2](http://10.101.56.32:3000/#/test)
-
animation-name:none -
animation-timing-function:ease效果 路径 工具 -
animation-delay:0s -
animation-direction:normal效果 属性值 -
animation-fill-mode:none属性值 -
animation-play-state:running可获取和设置
重点：
- 交错动画：设置不同的延迟时间
[animation-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay "animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。")，适用于多元素动画相同但存在延迟 - 伪类伪元素：适用于相似元素或者层叠显示
- overflow:遮盖
- “连续”动画：多个animation动画值实现，用逗号隔开 或者 标签嵌套
三，案例训练
现有案例
自定义案例
四，其他
换肤：JS修改CSS/SCSS变量
[CSS语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95)： At-rule，inherit，[var变量](https://www.cnblogs.com/xiaohuochai/p/7182771.html)
[SCSS语法](https://www.jianshu.com/p/3259976b414b)： $变量，插值#{变量} ，函数
三角及三角阴影：filter:drop-shadow
