Home > Article > Web Front-end > What are the four related properties of css3 animation?

What are the four related properties of css3 animation?

青灯夜游Original: 2022-01-17 16:02:282101browse

css3 sets four related attributes for animation: 1. Transform attribute, used to apply 2D or 3D transformation to elements; 2. Transition attribute, used to achieve transition effects; 3. Animation attribute, used to give elements Bind animation; 4. "@keyframes" defines the behavior of a cycle of animation.

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

Generally speaking, there are only three properties of CSS3 animation: transform, transition, and animation.

transform property applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.

transition The property is a shorthand property for setting four transition properties:

transition-property
transition-duration
transition-timing-function
transition-delay

<strong>animation</strong> The property is a shorthand property for setting six animation properties:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

## The animation attribute needs to be used together with the @keyframes rule. to create animations.

@keyframes<strong></strong> Rules

The @keyframes rules enable you to create animations.

The principle of creating animation is to gradually change one set of CSS styles into another set of styles.

You can change this set of CSS styles multiple times during the animation process.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start time of the animation, 100% is the end time of the animation.

For best browser support, you should always define 0% and 100% selectors.

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

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

What are the four related properties of css3 animation?

（Learning video sharing:

css video tutorial）

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

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 get today's day of the week with JavaScriptNext article：How to get today's day of the week with JavaScript

See more

What are the four related properties of css3 animation?

Related articles