写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

写在前面

1. 过渡

1.1 过渡简介

1.2 transition-property

1.3 transition-duration

1.4 transition-delay

1.5 transition-timing-function

1.6 transition 复合属性

2. 动画

2.1 什么是帧

2.2 什么是关键帧

2.3 动画的基本使用

2.4 动画的其他属性

2.5 动画复合属性

2.6 动画与过渡的区别

结语

【往期回顾】

【CSS3系列】第六章 · 2D和3D变换

【CSS3系列】第五章 · web 字体

【CSS3系列】第四章 · CSS3新增渐变

【CSS3系列】第三章 · CSS3新增边框和文本属性

【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

【CSS3系列】第一章 · CSS3新增的三种基本属性

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

1. 过渡

1.1 过渡简介

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式。

1.2 transition-property

作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会有过渡效果。
常用值：
none ：不过渡任何属性。
all ：过渡所有能过渡的属性。
具体某个属性名，例如： width 、 heigth ，若有多个以逗号分隔。
不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。
常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影。

1.3 transition-duration

作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
常用值：
0 ：没有任何过渡时间 —— 默认值。
s 或 ms ：秒或毫秒。
列表：
如果想让所有属性都持续一个时间，那就写一个值。
如果想让每个属性持续不同的时间那就写一个时间的列表。

代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_基本使用</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            /* 设置哪个属性需要过渡效果 */
            /* transition-property: width,height,background-color; */

            /* 让所有能过渡的属性，都过渡 */
            transition-property: all;

            /* 分别设置时间 */
            /* transition-duration: 1s,1s,1s; */
            /* 设置一个时间，所有人都用 */
            transition-duration: 1s;
        }
        .box1:hover {
            width: 400px;
            height: 400px;
            background-color: green;
            transform: rotate(45deg);
            box-shadow: 0px 0px 20px black;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
1.4 transition-delay

作用：指定开始过渡的延迟时间，单位： s 或 ms

1.5 transition-timing-function

作用：设置过渡的类型
常用值：
ease ：平滑过渡 —— 默认值
linear ：线性过渡
ease-in ：慢 → 快
ease-out ：快 → 慢
ease-in-out ：慢 → 快 → 慢
step-start ：等同于 steps(1, start)
step-end ：等同于 steps(1, end)
steps( integer,?) ：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个参数默认值为 end 。
cubic-bezie ( number, number, number, number)：特定的贝塞尔曲线类型。
在线制作贝赛尔曲线：https://cubic-bezier.com

代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_高级使用</title>
    <style>
        .outer {
            width: 1300px;
            height: 900px;
            border: 1px solid black;
        }
        .outer:hover .box {
            width: 1300px;
        }
        .box {
            width: 200px;
            height: 100px;
            /* 让所有能过渡的属性，都过渡 */
            transition-property: all;
            /* 设置一个时间，所有人都用 */
            transition-duration: 5s;
            /* 过渡延迟 */
            /* transition-delay: 2s; */
        }
        .box1 {
            background-color: skyblue;
            transition-timing-function: ease;
        }
        .box2 {
            background-color: orange;
            transition-timing-function: linear;
        }
        .box3 {
            background-color: gray;
            transition-timing-function: ease-in;
        }
        .box4 {
            background-color: tomato;
            transition-timing-function: ease-out;
        }
        .box5 {
            background-color: green;
            transition-timing-function: ease-in-out;
        }
        .box6 {
            background-color: purple;
            transition-timing-function: step-start;
        }
        .box7 {
            background-color: deepskyblue;
            transition-timing-function: step-end;
        }
        .box8 {
            background-color: chocolate;
            transition-timing-function: steps(20,end);
        }
        .box9 {
            background-color: rgb(18, 78, 34);
            transition-timing-function: cubic-bezier(1,.35,.78,1.24);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">ease（慢，快，慢）</div>
        <div class="box box2">linear（匀速）</div>
        <div class="box box3">ease-in（慢，快）</div>
        <div class="box box4">ease-out（快，慢）</div>
        <div class="box box5">ease-in-out（慢，快，慢）</div>
        <div class="box box6">step-start不考虑过渡的时间，直接就是终点</div>
        <div class="box box7">step-end考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点</div>
        <div class="box box8">steps分步过渡</div>
        <div class="box box9">无敌的贝赛尔曲线</div>
    </div>
</body>
</html>
1.6 transition 复合属性

如果设置了一个时间，表示 duration ；如果设置了两个时间，第一是 duration ，第二个是delay ；其他值没有顺序要求。
transition:1s 1s linear all;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_过渡复合属性</title>
    <style>
        .outer {
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: orange;
            transition:linear all 3s 0.5s ;
        }
        .outer:hover .inner {
            width: 1000px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

2. 动画

2.1 什么是帧

一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。

2.2 什么是关键帧

关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的 2-3 帧。

2.3 动画的基本使用

第一步：定义关键帧（定义动画）

1. 简单方式定义：

/*写法一*/
@keyframes 动画名 {
    from {
        /*property1:value1*/
        /*property2:value2*/
    }
    to {
        /*property1:value1*/
    }
}

2. 完整方式定义：

@keyframes 动画名 {
    0% {
        /*property1:value1*/
    }
    20% {
        /*property1:value1*/
    }
    40% {
        /*property1:value1*/
    }
    60% {
        /*property1:value1*/
    }
    80% {
        /*property1:value1*/
    }
    100% {
        /*property1:value1*/
    }
}

第二步：给元素应用动画，用到的属性如下：
- animation-name ：给元素指定具体的动画（具体的关键帧）
- animation-duration ：设置动画所需时间
- animation-delay ：设置动画延迟

.box {
    /* 指定动画 */
    animation-name: testKey;
    /* 设置动画所需时间 */
    animation-duration: 5s;
    /* 设置动画延迟 */
    animation-delay: 0.5s;
}

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_基本使用</title>
    <style>
        .outer {
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        /* 定义一个动画（定义一组关键帧）—— 第一种方式 */
        @keyframes wangyoudong {
            /* 第一帧 */
            from {
                
            }
            /* 最后一帧 */
            to {
                transform: translate(900px);
                background-color: red;
            }
        }
        /* 定义一个动画（定义一组关键帧）—— 第二种方式 */
        @keyframes wangyoudong2 {
            /* 第一帧 */
            0% {

            }
            /* 29% {
              background-color: red;  
            } */
            /* 48% {
                background-color: orange;
            } */
            /* 88% {
                background-color: yellow;
            } */
            /* 最后一帧 */
            100% {
                transform: translate(900px) rotate(360deg);
                background-color: purple;
                border-radius: 50%;
            }
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            /* 应用动画到元素 */
            animation-name: wangyoudong2;
            /* 动画持续的时间 */
            animation-duration: 3s;
            /* 动画延迟时间 */
            animation-delay: 0.2s;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

2.4 动画的其他属性

animation-timing-function ，设置动画的类型，常用值如下：
- ease ：平滑动画 —— 默认值
- linear ：线性过渡
- ease-in ：慢 → 快
- ease-out ：快 → 慢
- ease-in-out ：慢 → 快 → 慢
- step-start ：等同于 steps(1, start)
- step-end ：等同于 steps(1, end)
- steps( integer,?) ：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个参数默认值为 end 。
- cubic-bezie ( number, number, number, number)：特定的贝塞尔曲线类型。
animation-iteration-count ，指定动画的播放次数，常用值如下：
- number ：动画循环次数
- infinite ：无限循环

animation-direction ，指定动画方向，常用值如下：
- normal ：正常方向 (默认)
- reverse ：反方向运行
- alternate ：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse ：动画先反运行再正方向运行，并持续交替运行
animation-fill-mode ，设置动画之外的状态
- forwards ：设置对象状态为动画结束时的状态
- backwards ：设置对象状态为动画开始时的状态
animation-play-state ，设置动画的播放状态，常用值如下：
- running ：运动 (默认)
- paused ：暂停

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_其他属性</title>
    <style>
        .outer {
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        @keyframes atguigu {
            from {
                
            }
            to {
                transform: translate(900px) rotate(360deg);
                background-color: purple;
                border-radius: 50%;
            }
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            /* 应用动画到元素 */
            animation-name: atguigu;
            /* 动画持续的时间 */
            animation-duration: 3s;
            /* 动画延迟时间 */
            animation-delay: 0.2s;

            /* ********其他属性--start*********** */
            /* 设置动画的方式 */
            animation-timing-function: linear;

            /* 动画播放的次数 */
            animation-iteration-count: infinite;

            /* 动画的方向 */
            animation-direction: alternate;

            /* 动画以外的状态（不发生动画的时候在哪里） */
            /* animation-fill-mode: forwards; */
        }
        .outer:hover .inner {
            /* 动画的播放状态 */
            animation-play-state: paused;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

2.5 动画复合属性

只设置一个时间表示 duration ，设置两个时间分别是：duration 和 delay ，其他属性没有数量和顺序要求。

.inner {
    animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}

备注： animation-play-state 一般单独使用。

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_动画的复合属性</title>
    <style>
        .outer {
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        @keyframes atguigu {
            from {
                
            }
            to {
                transform: translate(900px) rotate(360deg);
                background-color: purple;
                border-radius: 50%;
            }
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            animation: forwards 3s 0.5s alternate-reverse linear 2 atguigu;
        }
        .outer:hover .inner {
            /* 动画的播放状态 */
            animation-play-state: paused;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

2.6 动画与过渡的区别

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_动画与过渡的区别</title>
    <style>
        .outer {
            width: 1000px;
            height: 200px;
            border: 1px solid black;
        }
        .inner {
            width: 100px;
            height: 100px;
        }
        /* 用过渡，实现inner1跑到右边去 */
        .inner1 {
            background-color: orange;
            transition: 3s linear;
        }
        .outer:hover .inner1 {
            transform: translate(900px);
        }
        /* 用动画，实现inner2跑到右边去 */
        @keyframes atguigu {
            0%{}
            50%{
                background-color: red;
                border-radius: 50%;
                box-shadow: 0px 0px 20px black;
            }
            100%{
                transform: translate(900px);
            }
        }
        .inner2 {
            background-color: green;
            animation: atguigu 3s linear forwards;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">过渡</div>
        <div class="inner inner2">动画</div>
    </div>
</body>
</html>