What are the related properties of CSS3 animation?-Front-end Q&A-php.cn

What are the related properties of CSS3 animation?

青灯夜游

Release： 2022-03-15 17:26:34

Original

3003 people have browsed it

Animation-related attributes include: transform, transform-origin, transition, "@keyframes", animation, animation-name, animation-duration, animation-delay, etc.

What are the related properties of CSS3 animation?

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

css3 has three types of animation: transform, transition, animation

1, transform (2D/3D conversion attribute)

Properties	Description	CSS
transform	Elements suitable for 2D or 3D transformation	3
transform-origin	Allows you to change the transform element position	3
transform-style	Specify how to nest elements in 3D space	3
perspective	Specify how the 3D element is viewed in perspective	3
perspective-origin	Specify the bottom position of the 3D element	3
backface-visibility	Defines whether an element should be visible when not facing the screen	3

2. transition (transition attribute)

Attribute	Description	CSS
transition	This property is the abbreviation of transition-property, transition-duration, transition-timing-function, transition-delay form.	3
transition-property	Set the CSS property used for transition.	3
transition-duration	Set the length of time for transition.	3
transition-timing-function	Set the timing function for transition.	3
transition-delay	Specify the time when the transition starts.	3

3. animation (animation attribute)

##animation-iteration-countRetrieve or set the loop of object animation Times3animation-directionRetrieve or set whether the object animation moves in reverse direction in the loop3animation-play-stateRetrieve or set the state of the object animation3

Attribute	Description	CSS
@keyframes	Define an animation, the animation defined by @keyframes The name is used by animation-name.	3
animation	Composite attribute. Retrieves or sets the animation effects applied to the object.	3
animation-name	Retrieve or set the animation name applied to the object, which must be used in conjunction with the rule @keyframes, because the animation name is determined by @keyframes definition	3
animation-duration	Retrieves or sets the duration of the object animation	3
animation-timing-function	Retrieves or sets the transition type of the object animation	3
animation-delay	Retrieve or set the delay time of object animation	3

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 50px;
				height: 50px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copy after login

What are the related properties of CSS3 animation?

(Learning video sharing:

css video tutorial)

The above is the detailed content of What are the related properties of CSS3 animation?. For more information, please follow other related articles on the PHP Chinese website!