How many types of css3 transition properties are there?-Front-end Q&A-php.cn

How many types of css3 transition properties are there?

青灯夜游

Release： 2022-03-18 16:58:16

Original

3200 people have browsed it

There are 5 types of css3 transition properties: 1. transition; 2. transition-property; 3. transition-duration; 4. transition-timing-function; 5. transition-delay.

How many types of css3 transition properties are there?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS transitions allow you to smoothly change property values over a given period of time.

There are 5 types of css3 transition attributes:

Attribute	Description	CSS
transition	Abbreviation attribute, used to set four transition attributes in one attribute.	3
transition-property	Specifies the name of the CSS property that applies the transition.	3
transition-duration	Define how long the transition effect takes. The default is 0.	3
transition-timing-function	Specifies the time curve of the transition effect. The default is "ease".	3
transition-delay	Specifies when the transition effect starts. The default is 0.	3

CSS3 Transition is the effect of an element gradually changing from one style to another.

To achieve this, two things must be specified:

Specify the CSS property to add the effect
Specify the effect duration.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	width:200px;
}
</style>
</head>
<body>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

</body>
</html>

Copy after login

How many types of css3 transition properties are there?

(Learning video sharing: css video tutorial, web front-end )

The above is the detailed content of How many types of css3 transition properties are there?. For more information, please follow other related articles on the PHP Chinese website!