导航

• 过渡、动画和转换(2D/3D)【relative】、渐变
• html元素隐藏的几种方式与动画

一、用到的css动画库

• animation.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)

用途：用于旋转