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

---

过渡效果

过渡 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>