CSS过渡-transition

richeneen莳姼

已于 2022-08-18 16:55:02 修改

阅读量704

点赞数

文章标签： css 前端 html

于 2022-07-27 16:23:55 首次发布

本文链接：https://blog.csdn.net/weixin_53027472/article/details/126013726

版权

1.CSS Transition

CSS Transition提供了一种在更改CSS属性时控制动画速度的方法。其设置可以让元素的样式在变化过程中有一个过渡，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

2. 过渡三要素

必须要有属性发生样式变化
必须告诉系统哪个属性需要执行过渡效果
必须告诉系统过渡效果持续时长

3.如何引发过渡？

:hover 鼠标悬停触发
:active 鼠标按下上触发
:focus 获得焦点时触发
@media 触发符合媒体查询条件时触发
点击事件，用户点击元素时触发

4.Transition 过渡属性

transition-property 规定应用过渡的CSS属性名称
none 没有属性会获得过渡效果
all 全部属性都将获得过渡效果
property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔
transition-duration 定义过渡花费的时间默认为0
time 规定完成过渡效果需要花费的时间（以s或ms为单位）
transition-delay 规定需要等待过渡的时间
time 指定等待多长后开始过渡（以s或ms为单位）
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
过渡的简写、连写形式

transition: 过渡属性 过渡时长 运动速度 延迟时间;
/* 如果有多个属性需要过渡，用逗号隔开；多个属性值用空格隔开 */
/*transition: width 5s linear 0s,background-color 5s linear 0s;*/
/*transition: background-color 5s linear 0s;*/
/*transition: width 5s,background-color 5s,height 5s;*/

连写注意点：