Rotating box animation in css | Css
.box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: randomAnimation 2s infinite;
}
@keyframes randomAnimation {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
50% {
transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) scale(1);
}
}
<div class="box"></div>
This CSS code defines a box element with specific styling and animation properties, as well as the keyframes for the animation: 1. The `.box` class styles the box element with a width and height of 100px, blue background color, and absolute positioning. The element is centered on the page using `top: 50%` and `left: 50%`, and then further positioned centrally using `transform: translate(-50%, -50%)`. 2. The `animation` property is used to apply the `randomAnimation` keyframe animation to the box element. It lasts for 2 seconds and repeats infinitely. 3. The `@keyframes randomAnimation` rule defines the animation sequence with keyframes at different percentages of completion. - At 0% (start), the element is at its original position without rotation and scaling. - At 50%, the element rotates 180 degrees and scales to 1.5 times its original size. - At 100% (end), the element completes a full rotation of 360 degrees and returns to its original size. Overall, this code creates a box element that rotates, scales, and repeats the animation continuously.