【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）感激相遇 你好 我是阿ken transition
感激相遇 你好 我是阿ken
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴。
🌊🌈关于内容：
9.1 过渡
CSS3 提供了强大的过渡属性，它可以在不使用 Flash 动画或者 JavaScript 脚本的情况下，为元素从一种样式转变为另一种样式时添加效果， 如渐显、渐弱、动画快慢等。在 CSS3 中，过渡属性主要包括 transition-property、transition-duration、transition-timing-function、transition-delay，本节将分别对这些过渡属性进行详细讲解。
9.1.1 transition-property 属性
transition-property 属性用于指定应用过渡效果的 CSS 属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的 CSS 属性改变时，过渡效果才开始。其基本语法格式如下：
transition-property: none | all | property;
在上面的语法格式中，transition-property 属性的取值包括none、all 和 poperty 三个，
transition-property 属性值
| 属性值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果 |
| all | 所有属性都将获得过渡效果 |
| property | 定义应用过渡效果的 CSS 属性名称，多个名称之间以逗号分隔 |
案例：演示 transition-property 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transition-property 属性</title>
<style type="text/css">
div {
width: 400px;
height: 100px;
background-color: red;
font-weight: bold;
color: #FFF;
}
div:hover {
background-color: blue;
/* 指定动画过渡的css属性 */
-webkit-transition-property: background-color;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-property: background-color;
/*Eirefox 浏览器兼容代码*/
-o-transition-property: background-color;
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>使用 transition-property 属性改变元素背景色</div>
</body>
</html>
当鼠标指针放在红色盒子上，
在上述案例中，通过 transition-property 属性指定产生过渡效果的 CSS 属性为 background-color，并设置了鼠标移上时背景颜色变为蓝色，同时为了解决浏览器的兼容性问题，分别添加了不同的浏览器的前缀兼容代码。
当鼠标指针悬浮到网页中的 < div> 区域时，背景色立刻由红色变为蓝色，而不会产生过渡。这是因为在设置 " 过渡 " 效果时，必须使用 transition-duration 属性设置过渡时间，否则不会产生过渡效果。
9.1.2 transition-duration 属性
transition-duration 属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒 (s) 或者毫秒 (ms)，其基本语法格式如下：
transition-duration: time;
案例：演示 transition-duration 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transition-duration 属性</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
margin: 0 auto;
background-color: yellow;
border: 2px solid #00f;
color: #000;
}
div:hover {
background-color: red;
/* 指定动画过渡的css属性 */
-webkit-transition-property: background-color;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-property: background-color;
/*Firefox浏览器兼容代码*/
-o-transition-property: background-color;
/*opera浏览器兼容代码*/
/*指定动画过渡的时间*/
-webkit-transition-duration: 5s;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-duration: 5s;
/*Firefox 浏览器兼容代码*/
-o-transition-duration: 5s;
/*Opera 浏览器兼容代码*/
}
</style>
</head>
<body>
<div>使用 transition-duration 属性设置过渡时间</div>
</body>
</html>
当把鼠标指针放在盒子上的时候，盒子的颜色会逐渐由黄色变为红色
在上述案例中，通过 transition-property 属性指定产生过渡效果的 CSS 属性为 background-color，并设置了鼠标移上时背景颜色变为红色。同时，使用 transtion-duration 属性来定义过渡效果需要花费 5 秒的时间。当鼠标指针悬浮到网页中的 < div> 区域时，黄色背景将逐渐过度为红色背景。
9.1.3 transition-timing-function 属性
transition-timing-function 属性规定过渡效果的速度曲线，默认值为 " ease " ，其基本语法格式如下：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n, n, n, n);
从上述语法可以看出，transition-timing-function 属性的取值有很多， transition-timing-function 属性值
| 属性值 | 描述 |
|---|---|
| linear | 指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0, 0, 1, 1) |
| ease | 指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于 cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | 指定以慢速开始，然后逐渐加快(淡入效果)的过渡效果，等同于 cubic-bezier (0.42, 0, 1, 1) |
| ease-out | 指定以慢速结束 (淡出效果) 的过渡效果，等同于 cubic-bezier (0, 0, 0.58, 1) |
| ease-in-out | 指定以慢速开始和结束的过渡效果，等同于cubic- bezier(0.42, 0, 0.58, 1) |
| cubic-bezier(n, n, n, n) | 定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0 ~1 |
案例：演示 transition-timing-function 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transition-timing-function 属性</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: yellow;
border: 5px solid red;
border-radius: 0px;
}
div:hover {
border-radius: 105px;
/*指定动画过渡的css属性*/
-webkit-transition-property: border-radius;
/*safari and Chrome浏览器兼容代码*/
-moz-transition-property: border-radius;
/*Firefox 浏览器兼容代码*/
-o-transition-property: border-radius;
/*Opera浏览器兼容代码*/
/*指定动画过渡的时间*/
-webkit-transition-duration: 5s;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-duration: 5s;
/*Firefox浏览器兼容代码*/
-o-transition-duration: 5s;
/*Opera浏览器兼容代码*/
/*指定动画以慢速开始和结束的过渡效果*/
-webkit-transition-timing-function: ease-in-out; /*Safari and Chrome 浏览器兼容代码*/
-moz-transition-timing-function: ease-in-out;
/*Firefox浏览器兼容代码*/
-o-transition-timing-function: ease-in-out;
/*Opera浏览器兼容代码*//*第二十八行代码*/
}
</style>
</head>
<body>
<div>transition-timing-function 属性</div>
</body>
</html>
当鼠标指针放在盒子上时，就会发生以下变化
在上述案例中，通过 transition-property 属性指定产生过渡效果的 CSS 属性为 " border-radius " 并指定过渡动画由正方形变为正圆形。然后使用 transition-duration 属性定义过渡效果需要花费 5 秒的时间，同时使用 transition-timing-function 属性规定过渡效果以慢速开始和结束。当鼠标指针悬浮到网页中的 < div> 区域时，过渡的动作将会被触发，正方形将慢速开始变化，然后逐渐加速，随后慢速变为正圆形。
9.1.4 transition-delay 属性
transition-delay 属性规定过渡效果何时开始，默认值为0,常用单位是秒 (s) 或者毫秒 (ms) 。transition-delay 的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下：
transition-delay: time;
案例：在上个案例基础上演示 transition-delay 属性的用法，在第二个 css 样式内增加如下样式，
/*指定动画延迟触发*/
-webkit-transition-delay: 2s;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-delay: 2s;
/*Firefox浏览器兼容代码*/
-o-transition-delay: 2s;
/*Opera浏览器兼容代码*/
上述案例使用 transition-delay 属性指定过渡的动作会延迟 2s 触发。
当鼠标指针悬浮到网页中的 < div> 区域时，经过 2s 后过渡的动作会被触发，正方形慢速开始变化，然后逐渐加速，随后慢速变为正圆形。
9.1.5 transition 属性
transition 属性是一个复合属性， 用于在一个属性中设置 transition-property、transition-duration、transition-timing -function、transition-delay 四个过渡属性。其基本语法格式如下。
transition: property duration timing-function delay;
在使用 transition 属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。如上次案例中设置的四个过渡属性，可以直接通过如下代码实现。
transition: border-radius 5s ease-in-out 2s;
- 注意: _ 无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用 transition 简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「关注」 谢谢支持❤
转载自:https://juejin.cn/post/6997535282757287950