CSS中的过渡效果及动画：transform和animation

CSS中的过渡效果及动画

过渡效果
- 过渡 transition
- 平面转换
- - 平移 translate
  - 旋转 rotate
  - 多重转换
  - 缩放 scale
  - 倾斜 skew
- 转换原点 transform-origin
- 渐变效果
- - 线性渐变
  - 径向渐变
- 空间转换
- - 平移
  - 视距 perspective
  - 旋转
  - 立体呈现 transform-style
  - 缩放
动画效果
- - 动画的实现
  - animation复合用法
  - animation拆分用法
  - 无缝移动动画演示

过渡效果的变化与动画的运用

过渡效果

过渡 transition

作用：可以为一个元素在不同状态之间切换得时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡得属性花费时间(s)

注意：

过渡的属性可以是具体得CSS属性
也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
transition 设置给元素本身（谁做过渡给谁加）

平面转换

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态

属性名：transform

属性值：平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）

平移 translate

transform: translate(X轴移动距离, Y轴移动距离);

取值
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
技巧
- translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

平移既可以用来当过渡效果使用，也可以用来当定位使用

注意的是，其百分比参照自身尺寸计算

旋转 rotate

transform: rotate(旋转角度);

取值：角度单位是 deg
技巧
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转

多重转换

transform: translate() rotate();

当需要平移和旋转两种效果时，必须采用复合写法，且要保持先平移再旋转

写两个transform属性后者效果会覆盖前者

多重转换是以第一种转换方式坐标轴为准转换形态，旋转会改变网页元素的坐标轴向

如果先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放 scale

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

技巧
- 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小

倾斜 skew

transform: skew(旋转度数);

取值为角度度数，角度单位为 deg

转换原点 transform-origin

默认情况下，转换原点是盒子中心点

transform-origin: 水平原点位置 垂直原点位置;

取值：

像素单位数值
left、right、top、bottom、center
百分比

渐变效果

background-image: radial-gradient()

属于背景颜色的一种，效果为多个颜色渐变过渡

线性渐变

background-image: linear-gradient(
  渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

渐变方向：可选
- to 方位名词
- 角度度数
终点位置：可选
- 百分比

/* 从上到下，蓝色渐变到红色 */
background-image: linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
background-image: linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
background-image: linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image: linear-gradient(0deg, blue, green 40%, red);

/*透明到半透明的渐变，注意：技术上，transparent 为 rgba(0,0,0,0) 的缩写。*/
background-image: linear-gradient(transparent,rgba(0,0,0,0.5));

径向渐变

background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

半径可以是2条，则为椭圆，一条x轴一条y轴
圆心位置取值：像素单位数值 / 百分比 / 方位名词

空间转换

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。

空间转换也叫 3D转换

属性：transform

属性值：同平面转换类似，多了个z轴

坐标轴取值的正负：向前、向下、向右为正

平移

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值与平面转换相同

默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果

视距 perspective

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：(添加给父级，取值范围 800-1200)

perspective: 视距;

旋转

transform: rotate3d(x, y, z, 角度度数);
rotateX()
rotateY()
rotateZ()

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

立体呈现 transform-style

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

flat：子级处于平面中
preserve-3d：子级处于 3D 空间

实现一个立方体

.box {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
transition: all 2s;


transform-style: preserve-3d;
perspective: 1000px;
}

.box:hover {
transform: rotateX(-180deg) scale3d(2,2,2);

}

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

}

.front {
background-color: salmon;
transform: translateZ(100px);
}

.back {
background-color: hotpink;
transform: translateZ(-100px);
}

.left {
background-color: rgb(40, 173, 40);
transform: rotateY(90deg) translateZ(100px);
}

.right {
background-color: rgb(99, 70, 70);
transform: rotateY(90deg)  translateZ(-100px);
}
.top {
background-color: rgb(40, 153, 173);
transform: rotateX(90deg) translateZ(100px);
}

.bottom {
background-color: rgb(106, 36, 237);
transform: rotateX(90deg)  translateZ(-100px);
}

<div class="box">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画效果

过渡效果与动画效果区别：

过渡：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画的实现

1、定义

/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}

两种定义取决于你需要的动画需要几步，若只有两步，则使用方式一，两步以上则用方式二

2、使用

使用属性加给自身，谁需要动画效果就加在谁身上

animation: 动画名称 动画花费时长;

animation复合用法

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

/*多组动画*/
animation: 
  动画一,
  动画二,
  ... ...
;

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
多组动画中间逗号隔开

.box {
    width: 200px;
    height: 100px;
    background-color: pink;

    /* linear：匀速 */
    animation: change 1s linear;

    /* steps(n)：分步动画，分n步，工作中，配合精灵图实现精灵动画 */
    animation: change 1s steps(3);

    /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
    animation: change 1s 2s;

    /* 重复次数，infinite：无限循环 */
    animation: change 1s 3;
    animation: change 1s infinite;

    /* alternate：反向 */
    animation: change 1s infinite alternate;

    /* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
    animation: change 1s forwards;
    animation: change 1s backwards;
    
    /*多组动画同时实行*/
    animation: 
        change 1s,
        move 1s;
}

/* 宽度 从 200 变化到 800 */
@keyframes change {
    from {
        width: 200px;
    }
    to {
        width: 800px;
    }
}

@keyframes move {
    /*初始状态和原状态相同时，可以省略
    from{
        transform: translate(0);
    }*/
    to{
        transform: translate(200px);

    }
}

animation拆分用法

属性	作用	取值
animation-name	调用的动画名称	名称
animation-duration	需要运行动画的时间	时间s
animation-delay	延迟多久启动动画	时间s
animation-fill-mode	动画执行完毕时的状态	backwards:开始时状态 forwards：结束时状态
animation-timing-function	速度曲线	linear steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite：无限重复
animation-direction	动画运动方向	alternate：正向结束后反向
animation-play-state	暂停动画	paused：暂停，可配合:hover

无缝移动动画演示

循环移动展示

效果代码演示

* {
    margin: 0;
    padding: 0;

}

.box {
    margin: 200px auto;
    height: 80px;
    width: 600px;
    border: 1px solid black;

    overflow: hidden;
}

.box ul {
    display: flex;
    /* transition: all 2s; */

    animation: move 2s linear infinite;
}

.box ul li {
    list-style: none;
}
@keyframes move {
    from{
        transform: translate(0);
    }
    to{
        transform: translate(-1400px);
    }
}

.box ul li div {
    height: 80px;
    width: 200px;

}

<div class="box">
    <ul>
        <li><div style="background-color: rgb(244, 188, 116);"></div></li>
        <li><div style="background-color: rgb(241, 139, 6);"></div></li>
        <li><div style="background-color: rgb(200, 245, 23);"></div></li>
        <li><div style="background-color: rgb(215, 250, 242);"></div></li>
        <li><div style="background-color: rgb(215, 221, 250);"></div></li>
        <li><div style="background-color: rgb(250, 215, 238);"></div></li> 
        <li><div style="background-color: rgb(244, 9, 75);"></div></li>
		/*预留重复补充，补充的大小刚好填充展示的区域*/
        <li><div style="background-color: rgb(244, 188, 116);"></div></li>
        <li><div style="background-color: rgb(241, 139, 6);"></div></li>
        <li><div style="background-color: rgb(200, 245, 23);"></div></li>
    </ul>
</div>