CSS Rotation Animation
CSS Rotation Animation
In web design, animation is a crucial element, adding a sense of liveliness and appeal to a page. Rotation animation is a common animation effect that allows elements to rotate on a page, creating a visually appealing experience for users. In this article, we’ll detail how to implement rotation animation using CSS.
1. Using the transform Property to Implement Basic Rotation Animation
First, we can use the transform property to implement a basic rotation effect. By setting the rotate value, you can control the rotation angle of the element to achieve a rotation animation effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we define a div element named box and apply a rotation animation by setting the animation property. Within the @keyframes, we define an animation named rotate that rotates from 0 to 360 degrees, creating an infinite loop.
2. Control the Rotation Center Using the transform-origin Property
By default, the rotation center of an element is the center point of the element, but we can also control the location of the rotation center using the transform-origin property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
animation: rotate 2s infinite linear;
transform-origin: top left;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the rotation center to the top left corner of the element by setting transform-origin: top left;, thus achieving a rotation effect centered on the top left corner.
3. Controlling Rotation Speed with the animation-timing-function Property
In addition to controlling the rotation angle and center, we can also control the rotation speed using the animation-timing-function property. Common values include linear, ease-in, ease-out, and ease-in-out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #00f;
animation: rotate 2s infinite ease-in-out;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set animation-timing-function: ease-in-out; to control the rotation speed to accelerate first and then decelerate.
4. Use the animation-delay property to set a delayed start time.
Sometimes, we want the animation to start some time after the page loads. In this case, we can use the animation-delay property to set a delayed start time for the animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ff0;
animation: rotate 2s infinite linear;
animation-delay: 1s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set animation-delay: 1s; to delay the rotation animation for 1 second.
5. Use the animation-direction property to control the rotation direction
In addition to controlling the rotation angle and speed, we can also control the rotation direction using the animation-direction property. Common values include normal, reverse, alternate, and alternate-reverse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0ff;
animation: rotate 2s infinite linear;
animation-direction: alternate;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we achieve the back-and-forth rotation effect by setting animation-direction: alternate;.
6. Use the animation-fill-mode property to control the state after the animation ends.
Sometimes, we want an element to remain in the state at the last frame of the animation. To do this, we can use the animation-fill-mode property. Common values include none, forwards, backwards, and both.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f0f;
animation: rotate 2s infinite linear;
animation-fill-mode: forwards;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
} }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set animation-fill-mode: forwards; to keep the element in the last frame of the animation after it ends.
7. Use the animation-play-state property to control the animation’s play state
Sometimes, we want to pause or resume an animation. To do this, we can use the animation-play-state property to control the animation’s play state. Common values include running and paused.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
animation: rotate 2s infinite linear;
}
.paused {
animation-play-state: paused;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
} }
</style>
</head>
<body>
<div class="box"></div>
<button onclick="pauseAnimation()">Pause Animation</button>
<button onclick="resumeAnimation()">Resume Animation</button>
<script>
function pauseAnimation() {
document.querySelector('.box').classList.add('paused');
}
function resumeAnimation() {
document.querySelector('.box').classList.remove('paused');
}
</script>
</body>
</html>
Output:
In the example code above, we use JavaScript to control the animation’s playback state. Clicking the “Pause Animation” button pauses the animation, and clicking the “Resume Animation” button resumes the animation.
8. Using @keyframes to Define Multiple Keyframes
In addition to using the from and to keyframes, we can also use @keyframes to define multiple keyframes to achieve more complex rotation animation effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #00f;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we implement a quarter-turn rotation animation by defining multiple keyframes.
9. Use the animation-iteration-count property to control the number of times an animation plays.
Sometimes, we want an animation to play only a certain number of times before stopping. In this case, we can use the animation-iteration-count property to control the number of times an animation plays.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
animation: rotate 2s 3 linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set animation-iteration-count: 3; to play the animation only three times before stopping.
10. Define the animation name using the animation-name attribute
In addition to defining animation effects directly in the animation attribute, we can also use the animation-name attribute to define the animation name and then define the specific animation effect in @keyframes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
} }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we define the animation name as spin by setting animation-name: spin;, and then define the specific spin animation effect in @keyframes.