动画

主要内容

2D转换
3D转换
过渡
动画

2D 转换

转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。

旋转变形`rotate`

将transform属性的值设置为rotate()，即可实现旋转变形。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。

transform:(rotate 45deg);

缩放变形 `scale()`

将transform属性的值设置为scale()，即可实现缩放变形。当数值小于1时，表示缩小元素；大于1表示放大元素。

transform: scale(x, y);
transform: scale(2, 0.5);
/*x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。*/

transform:(scale 3);
/*如果只写一个值就是等比例缩放。*/

斜切变形 `skew()`

将transform属性的值设置为skew()，即可实现斜切变形。

transform:(skew 10deg, 20deg);
			/* 	x斜切角度 y斜切角度 */

跟translate()、scale()方法类似，倾斜也有3种情况：skewX()、skewY()、skew()。

参数x表示元素在x轴方向的倾斜度数，单位为deg（即degree的缩写）。如果度数为正，则表示元素沿x轴方向逆时针倾斜；如果度数为负，则表示元素沿x轴方向顺时针倾斜。

参数y表示元素在y轴方向的倾斜度数，单位为deg。如果度数为正，则表示元素沿y轴方向顺时针倾斜；如果度数为负，则表示元素沿y轴方向逆时针倾斜。

对于倾斜的方向，我们不需要去记忆，因为在实际开发中，稍微测试一下就知道了。

位移变形 `translate()`

将transform属性的值设置为translate()，即可实现斜切变形。和相对定位非常像，位移变形也会“老家留坑”，“形影分离” 。

transform:(translate 100px, 200px);
				/* 	向右移动 向下移动 */

`transform-origin`属性

可以使用transform-origin属性设置自己的自定义变换原点。

3D转换

3D坐标系（左手坐标系）

左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。

从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。

3D旋转

将transform属性的值设置为rotateX()、rotateY()或者rotateZ，即可实现3D旋转。

transform:(rotateX 30deg); transform: rotateY(30deg);

空间移动

当元素进行3D旋转后，即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动

一定记住，空间移动要添加在3D旋转之后

transform: rotateX(30deg) translateX(30px)translateZ (100px);

`perspective`属性

perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px。

perspective: 500px;

3D呈现`transform-style`

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

例：制作一个正方体：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 10000px;
        }
        .box {
            width: 200px;
            height: 200px;
            perspective: 10000px;
            position: relative;
            /* 设置变形类型，保留它内部的3D效果 */
            /* 这个盒子又是舞台，又是演员，这个box整体带着里面的p旋转 */
            transform-style: preserve-3d;
            transition:all 10s ease 0s;
        }

        section:hover .box {
            transform: rotateX(360deg) rotateY(360deg);
        }

        .box p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .box p:nth-child(1) {
            background-color: rgba(219, 56, 211, 0.486);
            /* 前面 */
            transform: translateZ(100px);
        }

        .box p:nth-child(2) {
            background-color: rgba(42, 128, 199, 0.486);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px);
        }

        .box p:nth-child(3) {
            background-color: rgba(56, 219, 83, 0.486);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px);
        }

        .box p:nth-child(4) {
            background-color: rgba(213, 216, 32, 0.486);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box p:nth-child(5) {
            background-color: rgba(236, 82, 102, 0.486);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px);
        }

        .box p:nth-child(6) {
            background-color: rgba(119, 17, 236, 0.486);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <section>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </section>
</body>

</html>

过渡的基本使用

transition过渡

transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。transition属性有4个要素：

属性	意义
`transition-property`	哪些属性要过渡
`transition-duration`	动画时间
`transition-timing-function`	动画变化曲线（缓动效果）
`transition-delay`	延迟时间

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

transition: width 1s linear 0s;

过渡要定义在元素的开始状态上，而不是结束状态上

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity
背景颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都能被过渡
如果要所有属性都参与过渡，可以写all

过渡的缓动效果

transition-timing-function 缓动参数，也是变化速度曲线。属性值可以是：

linear 线性
ease (开始和结束慢)
ease-in （开始慢然后加速）
ease-out （开始快然后减速）
ease-in-out （先加速后减速）

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

transition: width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;

兼容性

过渡从IE10开始兼容，移动端兼容良好

曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡

优点：动画更细腻，内存开销小

动画的定义和调用

动画的定义

可以使用@keyframes来定义动画,keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀。

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

动画的调用

定义动画之后，就可以使用animation属性调用动画。

 animation: 定义的动画名称 持续时间 缓动效果 延迟 执行次数 是否反向
 animation: r 1s linear 0s 3 alternate;

动画属性

上文的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。

动画名称
```
animation-name: move;
```
持续时间
```
animation-duration: 4s;
```
缓动效果
```
animation-timing-function: ease-in;
```
延迟
```
animation-delay: 1s;
```
执行次数(如果想永远执行可以写infinite)
```
animation-iteration-count: 1;
```
设置动画结束时，盒子的状态(如果想让动画停止在最后结束状态，那么要加上forwards)
```
animation-fill-mode: forwards;
```
如果想让动画的第（偶数次）自动逆向执行，那么要加上alternate参数即可
```
animation-direction: alternate;
```

多关键帧动画

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

@keyframes changeColor {
	0% {
	background-color: red ;
	}
	20% {
	background-color:yellow
	}
	40% {
	background-color:blue
	}
	60% {
	background-color:green
	}
	80% {
	background-color:purple
	}
	100% {
	background-color:orange
	}
}

CSS3学习笔记(9)-过渡与动画

动画