1-2-11【CSS3】CSS过渡属性

题外话：这节课非常有意思哦~可以让元素动起来啦

文章内容输出来源：拉勾教育大前端就业集训营

1.概述

CSS3出现之前，前端一般使用Flash动画或JavaScript制作动画。
flash采用帧动画的形式制作动画，通过一帧一帧的画面按照固定的顺序和速度播放，比如说老式胶片电影。

老式胶卷电影的经典开头。

2.过渡属性

概述：在不使用Flash和js的情况下，使用过度属性可自动实现动画效果。
当前元素只要有“属性”发生变化时，即存在A和B两种状态，使用过渡属性，即可实现A和B之间的平滑过渡动画效果。
属性写法：transition：过渡的属性过渡时间运动曲线延时时间;

<!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>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: width 0.2s linear 0s;
        }
        .box:hover{
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

说明：transition设置的意思是：“当该元素的width属性发生变化时，使变化过渡0.2s实现，使用线性的变化方式，延迟0s开始过渡。
因为transition属性没有监视height属性，所以就算height变化了，也是直接变化而没有过渡动画。

单一属性

transition-property过渡的属性

属性值：
- none：表示没有属性过渡；
- all：表示所有变化的属性都过渡；
- 属性名：使用具体属性名，多个属性名用逗号隔开。

transition-duration和transition-delay

概述：duration是过渡的时间长度，delay是在过渡前的延迟时间。
属性值：以s为单位的时间长度，就算是0也要加单位s。

transition-timing-function时间曲线

概述：动画在播放时遵循的时间曲线。
属性值：

属性值	描述
linear	规定以恒定的速度实现从开始到结束的效果
ease	规定慢速开始，然后变快，然后慢速结束的效果
ease-in	规定以慢速开始，逐渐加速的效果
ease-out	规定以快速开始，逐渐减速的效果
ease-in-out	规定以慢速开始和结束的效果
cubic-bezier(x1,y1,x2,y2)	用两个点的坐标值，计算出一条贝塞尔曲线，作为动画的时间曲线

说明：如图所示，贝塞尔曲线是由两个点计算得到的一条时间曲线，所以在cubic-bezier()中，只需要提供两个点，就可以指定一条你自定义的时间曲线。

兼容性：IE10、Firefox、Chrome以及Opera浏览器支持transition属性。Safari需要加前缀-webkit-。

3.2D转换

概述：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，几乎可以完全取代Flash。
属性名：transform
属性值：根据不同的属性值，实现不同的2D转换。

注意！ transform是一个独立的属性，并不需要搭配transition才能生效。我只是为了例子更加直观所以才一起写的，不要被误导哦~

位移 translate()

概述：对元素进行水平&垂直方向上的移动。
书写语法：

属性值	说明
translate(x,y)	x,y分别是水平和垂直方向的距离，可以为px也可以为%
translate(x)	只有一个数值，表示水平方向的位移

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            transition: all 0.5s linear 0s;
        }
        div:hover{
            /* 位移属性 */
           transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

说明：利用伪类选择器hover，实现鼠标移动至盒子上方时，盒子向右向下各位移100像素。

缩放 scale()

概述：在元素的宽高两个维度对元素进行缩放。
书写语法：

属性值	说明
scale(x,y)	x,y分别是改变宽度和高度的倍数
scale(n)	只有一个数值，表示宽高同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            transition: all 0.5s linear 0s;
        }
        div:hover{
            /* 缩放 */
            transform: scale(0.5,1.5);
        }
    </style>
</head>
<body>
    <br>
    <br>
    <br>
    <div></div>
</body>
</html>

说明：如图所示，缩放盒子的宽度为50%，缩放盒子的高度为150%。

旋转 rotate()

概述：在元素的宽高两个维度对元素进行缩放。
书写语法：transform: rotate(数字deg)
- 说明：deg为度数单位，正数为顺时针旋转，负数为逆时针旋转。
- 注意：元素旋转后坐标轴也会发生变化！

<!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>
        div{
            width: 100px;
            height: 100px;
            position: relative;
            left: 50px;
            top: 50px;
            transition: all 0.5s linear 0s;
        }
        .box2{
            background-color: pink;
        }
        .box2:hover{
            transform: rotate(45deg) translate(100px);
        }
        .box1{
            background-color: red;
        }
        .box1:hover{
            transform: translate(100px) rotate(45deg) ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>
</html>

说明：因为旋转后，元素的坐标轴也会跟着旋转，所以旋转后的位移会以新的坐标轴为基准进行旋转，就导致了粉色盒子的情况。而同比红色的盒子，是先位移后旋转，位移时坐标轴没有受到影响，所以符合我们的预期。

倾斜 skew()

概述：在元素的水平方向和垂直方向上进行2D倾斜。
书写语法：transform: skew(数字deg,数字deg);
注意：两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。

<!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>
        div{
            width: 150px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s linear 0s;
            position: relative;
            top: 50px;
            left: 50px;
        }
        div:hover{
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

说明：此处以“在水平方向的倾斜”为例，注意，虽然倾斜了，但是坐标轴并没有发生变化。

transform-origin属性

概述：调整元素的水平和垂直方向基准点的位置。
作用：主要用于旋转，旋转是以元素的基准点进行变换的，基准点的位置不同，旋转的效果也不同。
书写方式：transform-origin: 水平方向垂直方向;
属性值：
- 水平方向：可以使用关键字left、center、right以及像素值和百分比。
- 垂直方向：可以使用关键字top、center、bottom以及像素值和百分比。

<!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>
        div{
            width: 150px;
            height: 100px;
            position: relative;
            transition: all 0.5s linear 0s;
            margin: 50px auto;
        }
        .box1{
            background-color: pink;
            transform-origin: center center;
        }
        .box1:hover{
            transform: rotate(45deg);
        }
        .box2{
            background-color: red;
            transform-origin: left top;
            margin: 0px auto;
        }
        .box2:hover{
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>
</html>

说明：粉色盒子的基准点是盒子的正中心，所以旋转起来是以中心为基准顺时针旋转45°；而红色盒子的基准点是左上顶点，所以旋转起来是以左上顶点为中心顺时针旋转45°，两者效果因基准点位置不同而大相径庭。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

结束语：一花一世界，一木一浮生，愿与诸君共勉