EN
CSS - 2D rotation animation
0
points
In this article, we would like to show you how to create 2D rotation animation using CSS.
Quick solution:
.element {
animation: rotate-element 3s linear infinite;
}
@keyframes rotate-element {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Practical examples
Example 1 - single element rotation
In this example, we present how to use @keyframes to create rotation animation for a single element. To rotate the element we use transform: rotate() from 0deg to 360deg. In order to make animation last forever, we need to specify .element class animation: infinite.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background: lightgray;
}
.element {
box-sizing: border-box;
width: 60px;
height: 60px;
border: 2px solid green;
border-radius: 50%;
background: linear-gradient(deepskyblue, green);
animation: animate-element 3s linear infinite;
}
@keyframes animate-element {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="element"></div>
</div>
</body>
</html>
Example 2 - rotate around another element (planets animation)
In this example, we add another @keyframes animation to create planets animation where moon and earth rotate around their own axis and moon rotates around the earth. When we rotate one element around another, we need to specify container position: relative and children position: absolute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.space {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background: lightgray;
}
.earth {
box-sizing: border-box;
position: absolute;
width: 60px;
height: 60px;
background: linear-gradient(deepskyblue, green);
border: 2px solid green;
border-radius: 50%;
animation: animate-earth 3s linear infinite;
}
.moon {
box-sizing: border-box;
position: absolute;
width: 30px;
height: 30px;
background: linear-gradient(gray, white);
border: 1px solid gray;
border-radius: 50%;
animation: animate-moon 3s linear infinite;
}
@keyframes animate-earth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-moon {
0% {
transform: rotate(0deg) translate(55px);
}
100% {
transform: rotate(360deg) translate(55px);
}
}
</style>
</head>
<body>
<div class="space">
<div class="earth"></div>
<div class="moon"></div>
</div>
</body>
</html>