Home > Article > Web Front-end > How many types of css3 transition properties are there?

How many types of css3 transition properties are there?

青灯夜游Original: 2022-03-18 16:58:163187browse

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

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>

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!

html5 css css3 Property function transition

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set animation to play after a few seconds in css3Next article：How to set animation to play after a few seconds in css3

See more

How many types of css3 transition properties are there?

Related articles