CSS动画属性

张登友，张登友的博客，张登友的网站——

CSS动画属性

1. 过渡：transition

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果

• 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

属性:

• transition-property: all; 如果希望所有的属性都发生过渡，就使用all
  • 设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。
  • 如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡
• transition-duration: 1s 过渡持续时间
• transition-timing-function: linear; 运动曲线
  • linear线性
  • ease 减速
  • case-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
• transition-delay: 1s; 过渡延迟, 多长时间后再执行过渡动画

可以简写为:

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

2. 2D转换&3D转换

转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。

• 2D转换包括: 缩放, 移动, 旋转

  • 缩放: scale

    transform: scale(x, y);
    /*  x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放 */
    transform: scale(2, 0.5);
    /* 取值：大于1表示放大，小于1表示缩小。不能为百分比 /

  • 位移: translate

    transform: translate(水平位移, 垂直位移);
    /* 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。*/
    transform: translate(-50%, -50%);
    /* 参数为百分比，相对于自身移动 */

    注: 如果盒子是绝对定位此时已经脱标了, 还可以用来居中使用

    position: absolute; /* 绝对定位的盒子 */
    top: 0;
    left: 50%; /* 首先，让左边线居中 */
    transform: translate(-50%); /* 然后，向左移动宽度的一半 */

  • 旋转: rotate

    transform: rotate(角度); 
    /* 正值 顺时针；负值：逆时针。 */
    transform: rotate(45deg);

    rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性

    /* transform-origin: 水平坐标 垂直坐标; */
    transform-origin: 50px 50px;
    
    /* 旋转时，以盒子底部的中心为坐标原点 */
    transform-origin: center bottom;   

    上方代码中还要给盒子设置 transition 过渡 。如果没有这行过渡的代码，效果会直接一步到位

• 3D转换

  1. 旋转: rotateX, rotateY, rotateZ

     transform: rotateX(360deg);    /* 绕 X 轴旋转360度 */
     transform: rotateY(360deg);    /* 绕 Y 轴旋转360度 */
     transform: rotateZ(360deg);    /* 绕 Z 轴旋转360度 */

  2. 移动: translateX、translateY、translateZ

     transform: translateX(100px);    /* 沿着 X 轴移动 */
     transform: translateY(360px);    /* 沿着 Y 轴移动 */
     transform: translateZ(360px);    /* 沿着 Z 轴移动 */

     注意: translateZ必须配合透视来使用 ; 需要给box的父元素加透视效果

  3. 透视: perspective

     格式有两种写法：

     • 作为一个属性，设置给父元素，作用于所有3D转换的子元素
     • 作为 transform 属性的一个值，做用于元素自身。

     perspective: 500px;

  4. 3D呈现（transform-style ）

     3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以是：

     transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */
     transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */

3. 定义动画的步骤

1. 通过@keyframes定义动画
2. 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性
3. 在指定元素里，通过animation属性调用动画

我们在 js 中定义一个函数的时候，是先定义，再调用：

js 定义函数：
    function fun(){ 函数体 }

 调用：
 	fun();

在 CSS3 中定义动画的时候，也是先定义，再调用：

/* 定义动画：*/
@keyframes 动画名{
    from{ 初始状态 }
    to{ 结束状态 }
}
/* 调用：*/
animation: 动画名称 持续时间；

/* for example : */
.box {
  animation: gun 8s linear infinite;
}
@keyframes gun {
  0% {
      transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
      transform: rotateX(360deg) rotateY(360deg);
  }
}

animation属性的格式：

animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s  alternate linear 3;
animation: move2 4s;

animation 是综合属性, 拆分之后的属性为:

1. 动画名称

animation-name: move	

2. 执行一次动画的持续时间:

animation-duration: 4s

3. 动画执行次数

animation-iteration-count: 1

4. 动画执行延迟

animation-delay: 1s;

5. 设置动画结束时, 盒子的状态

animation-fill-mode: forward;
/* 属性值： forwards：保持动画结束后的状态（默认）, backwards：动画结束后回到最初的状态。 */

6. 运动曲线:

animation-timing-function: ease-in;
/* 属性值可以是：linear ease-in-out steps()等。*/

steps()的效果:

animation: move 4s steps(2);
/* 表示动画不是连续执行，而是间断地分成几步执行 */