CSS3-过渡

最新推荐文章于 2024-09-03 20:10:35 发布

平平无奇前端练习生

最新推荐文章于 2024-09-03 20:10:35 发布

阅读量224

点赞数

分类专栏： CSS 文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/m0_57506941/article/details/119150912

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在CSS3中，无需使用Flash动画和JS，我们就可以添加某种效果让元素从同个属性的一个样式转变到另一个的过程显现出来，这就是过渡。通过过渡创建的效果可以提升用户体验。

过渡（transition）

transition-property:指定要指定过渡的属性

多个属性之间使用逗号（,）隔开，如果希望所有属性都执行过渡，则使用all关键字。

使用none则没有属性会获得过渡效果。

元素的大部分属性都支持过渡效果，注意过渡时必须是一个有效数值到另一个有效数值。

transition-duration:指定过渡效果的持续时间

transition-timing-function:过渡的时序函数

该属性可以用来指定过渡的执行方式，可选值：

ease：默认值，慢速开始，先加速，再减速

linear：匀速运动

ease-in：加速运动

ease-out：减速运动

ease-in-out：先加速再减速

cubic-bezier()：自己来指定时序函数（可参考http://cubic-bezier.com）

steps()：分布执行过渡效果

第一个值为一个数值，表示将过渡分为多少段执行；

第二个值可以设置为 end，即在时间结束后执行过渡（默认值），也可以设置为 start，即时间开始时执行过渡。（例子：steps(2,start);）

transition-delay:过渡效果的延迟，表示等待一段时间后再执行过渡

以上所有属性都可以用transition属性同时设置，没有顺序要求，但是如果里面有两个延迟时间则第一个必须是持续时间，第二个才是延迟时间！

以下是练习时的代码，仅供参考：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
div { 
	width: 200px; 
	height: 200px; 
	margin: auto; 
	background: pink;
	transition-property:width,height;
	transition-duration:3s,1s,7s;
}
div:hover { 
	cursor: pointer; 
	width: 600px; 
	height: 600px;
	transition-property:height;
}
</style>
</head>
<body>
<div></div>
</body>
</html>