CSS3-过度-transition

作者: Darren 分类: html与css 发布时间: 2019-05-22 20:53

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态,但是并不仅仅局限于hover状态来实现过渡。

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  多久以后开始;
属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

如果想要所有的属性都变化过渡, 写一个all 就可以

transition-duration 花费时间 单位是 秒s 也可以是毫秒ms 他们之间的关系是 1s=1000ms

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

案例源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 200px;
			height: 200px;
			background:skyblue;
			/*transition: 需要过渡的CSS属性 过渡需要花费的时间 运动曲线         延时多久以后开始过渡*/
			/*transition: CSS属性名          数值,单位s或者ms  ease或者linear等  数值,单位s或者ms*/
			/*1000ms = 1s*/

			/*过渡某个属性名*/
			/*transition: background 2s ease 0s;*/


			/*过渡多个属性名*/
			/*transition: background 2s ease 0s , width 5s ease 0s;*/

			/*所有属性都需要过渡,可以设置all*/
			/*transition: all 2s ease 0s;*/

			/*需要过渡的属性没有默认值,也就是一定写  其他都有默认值,但是默认过渡时间是0s*/
			/*transition: all;*/

			/*推荐写法*/
			/*transition: all 2s;*/
			
			/*让某个属性过渡完再过去另一个属性*/
			transition: background 2s ease 0s , width 2s ease 2s ,height 2s ease 4s;
			/*transition: all 2s ,height 2s ease 4s;*/
		}
		div:hover{
			background: red;
			width: 400px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注