导航
一、用到的css动画库
二、css动画之css转换相关属性
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偏移
1.移动(偏移)
matrix(1,0,0,1,e,f)
translate(e,f)
2.缩放
matrix(a,0,0,d,0,0)
scale(a,d)
3.倾斜
matrix(1,b,c,1,0,0)
skew(α1,α2)
4.旋转
matrix(cosα,sinα,-sinα,cosα,0,0)；
rotate(α)
3.steps()的应用
- 塞贝尔曲线 和 逐帧动画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]
三、总结
A：
移动:translate(x,y)、translate3d(x,y,z)用途一：用于上下左右移入移除
- 如由上向下进入
@keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
可以用百分比：x,y,z分别对应宽高视距√- 如果如果元素在视图中间，则开始移动距离可以为-3000px一个较元的距离
淡入淡出:加上opacity抖动：反复移动，可以实现抖动效果... 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }B：
缩放：scale(x,y)，scale3d(x,y,z)用途：主要用于居中弹窗
- 如从中心冒出来的弹窗
@keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } }
C：
倾斜:skew(x-deg,y-deg)用途：奔跑的效果
@keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }D：
旋转:rotate(angle)，rotate3d(x,y,z,angle)用途：用于旋转
