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> 

AI Explanation

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.