How to implement a rotation animation in css3-CSS Tutorial-php.cn

How to implement a rotation animation in css3

青灯夜游

Release： 2021-12-16 15:13:29

Original

7849 people have browsed it

Implementation method: 1. Use the statement "@keyframes animation name {50% {transform: rotate(rotation angle);}" to create a rotation animation; 2. Use "element {animation: animation name time infinite;}" ” statement applies rotation animation to the specified element.

How to implement a rotation animation in css3

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

css3 implements a rotation animation

1. If you want to use css3 to implement animation, you need to use the animation attribute and "@keyframes "rule.

@keyframes is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations.
Animations are similar to transitions in that they are representations of changing CSS properties over time. The main difference is that the transition is triggered implicitly when the property value changes (for example, when the property value changes on hover), but the animation is performed explicitly when an animated property is applied. Therefore, animations need to show explicit values for animated properties. These values are defined by the animation keyframes specified in the @keyframes rule. Therefore, the @keyframes rule consists of a set of encapsulated CSS style rules that describe how attribute values change over time.
Then, using different CSS animation properties, you can control many different aspects of the animation, including the number of animation iterations, whether to alternate between the start and end values, and the animation Whether it should run or pause. Animations can also delay their start time.
Syntax:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Copy after login

2. Use transform: rotate (rotation angle) in the "@keyframes" rule Control the rotation action.

Implementation code:

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

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

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

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Copy after login

How to implement a rotation animation in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to implement a rotation animation in css3. For more information, please follow other related articles on the PHP Chinese website!