CSS关于过渡的学习

最新推荐文章于 2023-01-09 18:16:16 发布

野蛮生长001

最新推荐文章于 2023-01-09 18:16:16 发布

阅读量251

点赞数

分类专栏： html 文章标签： css transition 笔记

本文链接：https://blog.csdn.net/qq_39125684/article/details/80616079

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

过渡主要掌握四个属性

1、transition-property：用于指定过渡应用效果的css 属性名称。

2、transition-duration：用于定义过渡效果花费的时间。

3、transition-timing-function：规定过渡效果的速度曲线。

4、transition-delay：规定过渡效果从何时开始。

1、transition-property的使用，代码如下

transition-property的属性如下：

none	没有属性会获得过渡效果
all	所有属性都会获得过渡效果
property	自己定义过渡效果的css属性名称，多个名称之间逗号分隔

<head>
	<meta charset="UTF-8">
	<title>过渡演示</title>
</head>
<style type="text/css">
	#demo{
		width: 100px;
		height: 100px;
		background: red;
	}
	#demo:hover{
		background: green;	
		transition-property: background;
	}
</style>
<body>
	<div id="demo">

	</div>	
</body>

效果：当鼠标移到方块上的时候没有过渡，直接变化。这说明：

单独使用 transition-property不会生效，必须配合transition-duration定义过渡时间一起使用

2、transition-property（指定过渡名称） transition-duration（指定过渡时间）；配合使用

transition-duration（指定过渡时间）

默认值是0，常用单位是秒（s）,或毫秒（ms）

<style type="text/css">
	#demo{
		width: 100px;
		height: 100px;
		background: red;
	}
	#demo:hover{
		background: green;	
		transition-property: background;
		transition-duration: 5s;
	}

</style>
<body>
	<div id="demo">

	</div>
</body>

效果：过渡生效，截图工具的原因，没法截取整个过程，但是为期五秒的过渡生效了。

3、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

<head>
	<meta charset="UTF-8">
	<title>过渡演示</title>
</head>
<style type="text/css">
	#demo{
		width: 100px;
		height: 100px;
		border: 5px solid #000;
		border-radius: 0px;
	}
	#demo:hover{
		border-radius: 50px;
		transition-property: border-radius;    
		transition-duration: 5s;
		transition-timing-function:ease-in-out;
	}

</style>
<body>
	<div id="demo">

	</div>
	
</body>

4、transition-delay属性（s）（ms）

正整数	过渡动作会延迟触发
0	默认值
负数	过渡动作会从该时间点开始，之前的动作被截断

<style type="text/css">
	#demo{
		width: 100px;
		height: 100px;
		border: 5px solid #000;
		border-radius: 0px;
	}
	#demo:hover{
		border-radius: 50px;
		transition-property: border-radius;    /* 指定 */
		transition-duration: 5s;
		transition-timing-function:ease-in-out;
		transition-delay: -3s;
	}

</style>
<body>
	<div id="demo">

	</div>
	
</body>