• 相关文章
• CSS动画简介

零：总结

• 过渡:一维动画：只有首尾帧，只能执行一次，单向的

• 从一个状态到最终状态的一个动画，相当于动画：可以理解为没有中间过渡的动画
• 触发原因：状态(属性)的改变
• 触发方式：

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

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

2. 动态改变属性值：js

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

• 动画：二维动画：相对于过渡，多个关键帧，多次执行、可反转、可暂停

• 多个状态的一个动画，相对于过渡，可以理解为有多个中间过渡的动画
• 触发原因：动画属性的改变

• 动画属性都具备了，则会启动动画
• 修改了animation-name:会从最初状态执行新的动画
• 修改了animation-duration:会映射到某个状态然后继续动画，如一开始4s。执行一秒后，暂停1s，再设置为10s。如果匀速则会从一半的位置继续
• animation-play-state:paused/running;修改动画状态为暂停或者运行 √
• 触发方式：对比过渡，只能 动态改变属性值：js

• 塞贝尔曲线 和 逐帧动画steps(step,[start|end])

• 过渡的塞贝尔曲线，作用于过渡
• 动画的塞贝尔曲线，也是作用于每一个过渡(注意不是整个动画哦) √
  即：动画的过渡间的运行轨迹是由时间百分比来决定的
  动画的过渡内的运行轨迹是由塞贝尔曲线来决定的
• steps()

语法：animation-timing-function：steps(stepNumber[, end | start])
说明：塞贝尔曲线是作用于每一个过渡的，steps是特殊的一种塞贝尔曲线，即也是作用于每一个过渡

eg:
@keyframes myfirst
{
 0% {} 20%  {} 40%  {}  60%  {}   80%  {}  100%  {}
}
即：0%-20% 、20%-40%、...之间不再是连续过渡，而是分为stepNumber跨步
那什么时候跳跃呢？=>跳跃点为每一个跨步的[, end | start]

• 转换：transform:转换transform也是css属性。其改变也会触发过渡及动画

• 转换，原来空间不变，即转换，默认给加了relative属性 √
• 可以定义多个过渡，如：transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)

• 语法：

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

内塞尔曲线

二、动画

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. 定义动画

eg:

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

40%,
100% {top:0px; left:0px; background:red;}
}

3.常见动画及成品

• 小程序动画

三、转换(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层 头像 */