共计 1149 个字符，预计需要花费 3 分钟才能阅读完成。
！important Github 中上了 10k 的都是优秀的框架
动画
flash
js
css3 高效，在可以使用 css3 完成动画的时候绝对不使用 js
1. 动画定义 – 交给专业的人来做
运行方式【关键帧】
@keyframes move(动画名称){
from{left:0;}
to{left:90%;}}
@keyframes move(动画名称){
0{left:0;}
30%{left:90%;}
50%{
}
100%{}}
2. 动画调用
animation-name: 动画名称;
animation-duration:3s; 动画持续时间
animation-fill-mode:forwards; 动画的填充，最后一帧的位置
forwards
backwards
animation-timing-function:linear; 动画的时间曲线
linear
ease
ease-in
steps
animation-delay:1s; 动画的延迟
animation-iteration-count:infinite（无休止）; 动画重复次数
animation-direction:alternate-reverse; 动画运行方向
animation-plat-state:running; 动画的运行状态3. 动画的企业级应用【animate.css】官网：https://animate.style/
在企业级开发的狮虎，动画的定义、动画的调用我们一般交给第三方，我们只是单纯的添加样式
1. 安装，用 link 链接引入
<link href=”https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css” rel=”stylesheet”>
2. 应用
查看官网，将你喜欢的 class 添加到元素上
<div class = “animate_animated animate_xxx”></div>
过渡
transition-property: all; 过渡属性
transition-duration: 2s; 持续时间
transition-delay: 1s; 延迟时间
transition-timing-function: linear; 时间曲线
transition: property duration delay linear;
过渡和动画的区别
动画是需要定义关键帧[可以同时对多个属性多个时间段进行更细致控制]
过渡无需声明关键帧，过渡也可以对多个属性进行控制，但是无法对多个时间段进行细致控制; 过渡需要有一个触发行为，一般为 hover
变形
transform: 变形函数;
rotate(xdeg) 旋转 deg 表示度数
rotateZ
rotateY
rotateX
scale(x,y) 缩放函数
skew() 拉伸函数
translate() 平移函数