前言

Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

CSS transition

定义和用法

transition：过渡，是一个简写属性，用于设置四个过渡属性：

transition-property：过渡效果的CSS属性名称
transition-duration：过渡效果持续时间，尽量>=0
transition-timing-function：过渡效果的速度曲线
transition-delay：过渡效果延迟触发时间

注：请始终设置 transition-duration 属性大于0。否则时长为 0，就不会产生过渡效果。

语法：

四种属性的详细定义：

transition-property

说明：规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法：
transition-property可能的值：

none：没有属性会获得过渡效果
all：所有属性都将获得过渡效果
property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

注：property是指css属性的名称，比如width、height之类的，是泛指，不要写成：transition-property:property，正确应该是transition-property:width、transition-property:width,height

示例

<html><head><style type="text/css">.item {background-color: #51c4d3;width: 500px;height: 300px;transition-property:height;/* 过渡属性为height*/transition-duration: 2s;/*过渡时间为2s*/}.item:hover{height: 500px;}</style>
</head><body><div class="item"></div></div>
</body></html>

效果图如下：

其中

transition-property:height;
transition-duration: 2s;

可以合写为：

transition:height 2s;

如果在transition中不写height，但是在hover那里指出过渡的属性，效果也是一样的（这是因为transition那里不写，默认是all，也就是所有属性都需要进行过渡，但是在hover那里设置过渡变化只有height，所以高度还是会变化的）

/*不写height*/
transition: 2s;

但是如果写为：

<html>
<head><style type="text/css">.item {background-color: #51c4d3;width: 500px;height: 300px;transition:width 2s;/* 过渡属性：宽度 时间：2s*/}.item:hover{height: 500px;/* 高度变化 */}</style>
</head>
<body><div class="item"></div></div>
</body>
</html>

结果会是高度发生了变化，因为经过在transition中声明width属性过渡，但是在hover中，并没有说明width的变化，而声明了height的变化，所以高度发生变化，而宽度不会

transition-duration

说明：过渡持续时间

如果为0，则观察不到过渡效果，一般设置大于0

transition-timing-function

说明：过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

有以下一些值：

transition-delay

说明：定过渡效果何时开始。默认数值为0。

transition-delay 值以秒或毫秒计。

结语

学习于：

https://www.w3school.com.cn/cssref/pr_transition.asp

结合教程学习基础，同时再动手敲代码。

上述理解仅为个人理解，如有不正确的地方，欢迎您的指出～

「CSS」知识点笔记：transition相关推荐

HTML和Css基础知识点笔记
HTML基础 Ctrl+/直接注释 px为像素单位 HTML是用来描述网页的一种语言 HTML指超文本标记语言:不是编程语言,是一种标记语言. 1.HTML基础标签 head.body 2.HTML标 ...
为什么jvm要分为堆、方法区等?原理是什么?_「JVM」知识点详解一：JVM运行原理详解...
前言 JVM 一直都是面试的必考点,大家都知道,但是要把它搞清楚又好像不是特别容易.JVM 的知识点太散,不系统,今天带大家详细的了解一下jvm的运行原理. 正文 1 什么是JVM? JVM是Java ...
「CSS」文本编排相关的CSS属性设置
1.font-family:设置字体族. 格式为font-family:字体1,字体2,--,通用字体族|inherit. 通用字体族,是指一类相似的字体.W3C的CSS规则规定,要指定一个通用字体族 ...
【web】模仿苹果计算器「html」「css」「javascript」
文章目录遇到的一些问题以及解决方法 html部分 css部分 javascript部分上web前端的课,老师布置了一个使用 html,css,javascript来完成一个计算器的作业作为一个 ...
「欧拉定理」学习笔记（费马小定理）
欧拉定理:对于互质的两个正整数$a, n$,满足$a^{φ(n)} ≡ 1\ (mod\ n)$ 证明: 设集合$S$包含所有$n$以内与$n$互质的数,共有$φ(n)$个:$$S = \{ x_1 ...
case when then else多个条件_CentOS「linux」学习笔记24:if和case多个条件判断
linux基础操作:主要介绍了if和case判断多个条件. 多条件判断语句if例子: 例子1:if [ $1 -ge 60 ];then echo "接收的参数位1的值大于等于60&quo ...
linux挂载硬盘_CentOS「linux」学习笔记12:磁盘管理、分区挂载卸载操作
linux基础操作:主要介绍了磁盘管理.分区挂载卸载操作. 特别说明linux中磁盘表现形式: IDE硬盘在linux中表示方式为"hdx".SCSI硬盘在linux中表示方式为& ...
centos 卸载_CentOS「linux」学习笔记12:磁盘管理、分区挂载卸载操作
linux基础操作:主要介绍了磁盘管理.分区挂载卸载操作. 特别说明linux中磁盘表现形式: IDE硬盘在linux中表示方式为"hdx".SCSI硬盘在linux中表示方式为& ...
linux运算_CentOS「linux」学习笔记22:算术运算符、逻辑运算符、关系运算符
linux基础操作:主要介绍啦算术运算符.逻辑运算符.关系运算符 1.算术运算符[主要用来计算数值] 注意使用expr运算时运算符和数值之间需要有空格,其他方式运算时不能有空格. 常用算术运算符号: ...
「CSS」常见的清除浮动方法
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素,浮动元素会造成父元素高度塌陷,所以当我们设置float后,需进行相应的清除浮动操作. 方法一:创建B ...

「CSS」知识点笔记：transition

前言