零：总结

• 手动触发-->改变属性 + transition属性说明=css过渡
• css写好触发->改变属性+ animation属性说明=css动画
• 转换可以看成一系列的属性变化。=>转换也可以结合过渡或动画
• 渐变是用在background上，当然也可以结合过渡或动画。但毕竟是在属性的函数内，所以不适合过渡动画

---

• 过渡，属性都是并行过渡的（并行），
• 动画，可以理解为多组过渡(组间是串行，组内是并行)

---

补充

• 过渡是手动触发，可能变动了很多属性，但只选部分属性需要过渡或全部
  所以，transition指定需要的属性 或者所有的all
• 动画是css写好，即写到动画里面的属性才会改变，即代表这些需要过渡

1.过渡语法：
transition: width 1s linear 2s，[...]; //属性 时长 曲线 延迟。可以多属性

2.动画语法：
animation: myfirst 5s linear 2s infinite alternate;//动画名称 一周时长 曲线  延迟 播放次数 是否反转

3.转换语法：
transform: none|transform-functions;//translate(e,f)偏移； scale(a,d)缩放； rotate(α)旋转；
transform-origin:50% 50% 0%;//设置中心点

一、过渡

1. 过渡属性语法

语法：transition: width 1s linear 2s，[...]; //属性 时长 曲线 延迟       可以多属性

属性：none|all|property 
曲线：cubic-bezier(x1,y1,x2,y2) 或字面量linear|ease|ease-in|ease-out|ease-in-out

内塞尔曲线

2. 手动触发

常见触发方式

1. 伪类选择器(动作类) 对于状态类：link :visited为超链接专用，(a链接正确书写方式:LVHA:覆盖)

• ：hover 长悬浮触发过渡
• ：active 长按触发过渡 √
• ：focus 获得焦点触发过渡 只针对能获得焦点的元素(表单)
• ：checked 选中元素触发过渡。仅适用于单选按钮或复选框

2. 动态改变其值：js

• 改变该元素的属性值
• 改变该元素的class值

二、动画

1.动画属性语法

语法：animation: myfirst 5s linear 2s infinite alternate;//动画名称 一周时长 曲线  延迟 播放次数 是否反转

曲线：内塞尔曲线和过渡的一样
播放次数：animation-iteration-count: n|infinite; infinite:无数次
是否反转：nimation-direction: normal|alternate; alternate播放一周后轮流反向播放

`animation-play-state `属性：paused|running;  属性规定动画正在运行还是暂停

2. 定义动画(相当于css主动触发改变属性值)

eg:

@keyframes myfirst
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

3.Js控制动画的播放/暂停

`animation-play-state `属性：paused|running;  属性规定动画正在运行还是暂停

object.style.animationPlayState="paused";//Js控制暂停
object.style.animationPlayState="running";//Js控制播放

4.总结

• 并行： {top:0px; left:0px; background:red;}是并行动画的
• 串行： 0% 25% 50% 间是串行动画的

5.常见动画及成品

• 小程序动画

三、转换(2D/3D)

1. 语法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
语法：
transform: none|transform-functions;
transform-origin:50% 50% 0%;//设置中心点

2. transform-functions转换函数（移动,缩放,倾斜,旋转）

理解概念：
知识储备：线性代数矩阵乘法其实就是对应空间转换

2D转换：matrix(a,b,c,d,e,f)  对应2D矩阵为[x,y,1]

| a c e |    | x |   | ax+cy+e |
| b d f |  * | y | = | bx+dy+f |
| 0 0 1 |    | 1 |   | 0+0+1   |

即(x,y,1)通过matrix(a,b,c,d,e,f)矩阵处理后。
成为(ax+cy+e,bx+dy+f,1)
为了更好的理解这些参数对转换的影响
换成：(ax+cy+e,dy+bx+f,1) 
所以a,d是对xy的缩放。cb是对xy的倾斜。ef是对xy的偏移

可以实现所有以下功能
移动( translate(e,f) )，缩放( scale(a,d) )
倾斜( skew(b,c) )，旋转( rolate(ang,ang) )

若移动 则对应ef。e为x移动距离，f为y移动距离：理解：x->...+e; y->...+f
若缩放 则对应ad。a为x方向缩放，d为y方向缩放：理解：x->ax; y->dy
若倾斜 则对应bc。b对应y倾斜，c对应x倾斜：理解：x->ax+cy ;y->dy+bx
若旋转 则对应abcd。(cosα,sinα,-sinα,cosα,0,0)；

一句话：
matrix(a,b,c,d,e,f)         ad缩放。cb倾斜。ef偏移

3. 总结

1.移动(偏移)
matrix(1,0,0,1,e,f)
translate(e,f)

2.缩放
matrix(a,0,0,d,0,0)
scale(a,d) 

3.旋转
matrix(cosα,sinα,-sinα,cosα,0,0)；
rotate(α)

4.常见转换及成品

四、渐变

1. 语法

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

eg：
background-image:
linear-gradient(to right,transparent 0%, grey 50%,transparent 100%), /* 第4层 动画 */
radial-gradient(circle closest-side at center, white 100%, transparent)；/* 第3层 头像 */