css动画详解

过渡：transition

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

1. transition包括以下属性：

• transition-property: all; 如果希望所有的属性都发生过渡，就使用all。

• transition-property: width，意思是只让盒子的宽度在变化时进行过渡

• transition-duration: 1s; 过渡的持续时间。

• transition-timing-function: linear; 运动曲线。属性值可以是：

  • linear 线性
  • ease 减速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速

• transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

2. 上面的四个属性也可以写成综合属性：

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

	transition: all 3s linear 0s;

2D 转换

缩放：scale

语法：

	transform: scale(x, y);

	transform: scale(2, 0.5);

• x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。

• 取值：大于1表示放大，小于1表示缩小。不能为百分比。

位移：translate

1. 语法：

	transform: translate(水平位移, 垂直位移);

	transform: translate(-50%, -50%);

• 参数为百分比，相对于自身移动。

• 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。

2. **应用：**让绝对定位中的盒子在父亲里居中
   可以利用偏移 translate 来做，这也是比较推荐的写法：

	div {
	    width: 600px;
	    height: 60px;
	    background-color: red;
	    position: absolute;      /* 绝对定位的盒子     */
	    left: 50%;               /* 首先，让左边线居中 */
	    top: 0;
	    transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】
	}

旋转：rotate

1. 语法：

	transform: rotate(角度);

	transform: rotate(45deg);

• 正值 顺时针；负值：逆时针。
• 给盒子设置transition过渡,如果没有这行过渡的代码，旋转会直接一步到位

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

	transform-origin: 水平坐标 垂直坐标;

	transform-origin: 50px 50px;

	transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点

3D 转换

如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。

浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。

透视：perspective

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

• 作为 transform 属性的一个值，做用于元素自身。

• 例：

perspective: 500px;

旋转：rotateX、rotateY、rotateZ

rotateZ`要配合透视使用
所有的3d旋转，对着正方向去看，都是顺时针旋转。

格式：

	transform: rotateX(360deg);    //绕 X 轴旋转360度

	transform: rotateY(360deg);    //绕 Y 轴旋转360度

	transform: rotateZ(360deg);    //绕 Z 轴旋转360度

移动：translateX、translateY、translateZ

translateZ必须配合透视来使用
格式：

	transform: translateX(100px);    //沿着 X 轴移动

	transform: translateY(360px);    //沿着 Y 轴移动

	transform: translateZ(360px);    //沿着 Z 轴移动

动画

定义动画的步骤

• 通过@keyframes定义动画；

• 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

• 在指定元素里，通过 animation 属性调用动画。

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

    定义动画：
        @keyframes 动画名{
            from{ 初始状态 }
            to{ 结束状态 }
        }

     调用：
      animation: 动画名称 持续时间；

animation属性的格式如下：

            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

            animation: move1 1s  alternate linear 3;

            animation: move2 4s;

动画属性

animation属性的格式如下：

            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

            animation: move1 1s  alternate linear 3;

            animation: move2 4s;

• 动画名称、持续时间两个属性，是必选项，且顺序固定。
• 动画方向属性值：normal 正常，alternate 反向。
• 运动曲线属性值可以是：linear（线性） ease-in-out（先加速后减速） steps()等。
• 如果把属性值写成** steps()，则表示动画不是连续执行**，而是间断地分成几步执行

steps()的效果

在调用动画时，我们写成：

	animation: move2 4s steps(2);

效果如下：

有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。
)的效果
在调用动画时，我们写成：

	animation: move2 4s steps(2);

效果如下：

[外链图片转存中…(img-0HsH8RRz-1729836209325)]

有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。