【CSS3系列】第七章 · 过渡和动画

写在前面

---

        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 ：秒或毫秒。
  • 列表 ：
    • 如果想让所有属性都持续一个时间，那就写一个值。
    • 如果想让每个属性持续不同的时间那就写一个时间的列表。

代码演示：

---

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

代码演示：

    
    
    


    

        
ease（慢，快，慢）
        
linear（匀速）
        
ease-in（慢，快）
        
ease-out（快，慢）
        
ease-in-out（慢，快，慢）
        
step-start不考虑过渡的时间，直接就是终点
        
step-end考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点
        
steps分步过渡
        
无敌的贝赛尔曲线
    

---

1.6 transition 复合属性

• 如果设置了一个时间，表示 duration ；如果设置了两个时间，第一是 duration ，第二个是delay ；其他值没有顺序要求。

transition:1s 1s linear all;

---

 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;
}

代码演示：

---

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 ：暂停

代码演示：

---

2.5 动画复合属性

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

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

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

代码演示：

---

2.6 动画与过渡的区别

代码演示：

    
    
    


    

        
过渡
        
动画
    

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力