【CSS3】动画详解

在css3中主要有三种动画

• transition：过渡
• transfrom：2D转换 | 3D转换
• animation

过渡：transition

这个动画意义上是补间动画（自动完成从起始状态到终止状态的过渡，不用管中间的状态），与通过一帧一帧按照固定顺序和速度播放的帧动画不同

transition包括四个属性

• transition-property：让哪些属性进行过渡，all（宽度背景色），width
• transition-duration：过渡的持续时间
• transition-timing-function：运动曲线,
  • linear：线性
  • ease：减速
  • ease-in：加速
  • ease-out：减速
  • ease-in-out：先加速后减速
• transition-delay：过渡延迟，多长时间后执行这个过渡动画
  综合写法

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;

转换：transfrom

转换可以实现元素的位移、旋转、变形、缩放甚至支持矩阵方式

• 2D转换：缩放(scale)、移动(translate)、旋转(rotate)
• 3D转换：旋转(rotateX rotateY rotateZ)、移动(translateX translateY translateZ)、透视(prespective)、3D呈现(transform-style)

1. 缩放：scale，进行缩放时不会挤走兄弟元素

transfrom:scale(x,y) 
//x：水平方向的缩放倍数，y：垂直方向的缩放倍数
//大于1表示放大，小于1表示缩小，一个值等比例缩放

2. 位移：translate，可以让绝对定位的盒子在父亲中居中

transfrom: translate(水平位移,垂直位移)
//百分比相对于自身移动，正值向右向下，负值向左向上，一个值则表示水平移动

3. 旋转：rotate，一般旋转要同时设置一个过渡动画，不要会一步到位旋转到目标位置体验感不好
   旋转时默认按照盒子正中心为坐标原点，transfrom-origin属性可以改变旋转的坐标原点

transfrom: rotate(角度)
//正值：顺时针，负值：逆时针
transform-origin: center bottom; /*旋转时，以盒子底部的中心为坐标原点*/

动画

设置多个节点精确控制一个或一组动画
定义动画的步骤

• 通过@keyframe定义动画
• 将这段动画通过百分比，分割成多个节点，然后再各节点中分别定义各属性
• 在指定元素李，通过animation属性调用动画

//定义动画：
 @keyframes 动画名{
    from{ 初始状态 }
    to{ 结束状态 }
 }
animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)