写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！
如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录
1.5 transition-timing-function
【往期回顾】
【其他系列】
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>
结语
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
