Question 239508 in Html Question posted in
Some basic documentation can be found here.

Html – How to animate a radial gradient smoothly using keyframes

I have this background pattern. But my code just skips to the end. I want a smooth animation from big to small circles.

.loader {
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  background-color: transparent;
  background-image: radial-gradient(#363636 10px, transparent 1px);
  background-size: 30px 30px;
  animation: loaderout 2s forwards;
}

@keyframes loaderout {
  100% {
     background-image: radial-gradient(#363636 0.7px, transparent 1px);
    
  }
}
<div class="loader" id="loader"></div>
Tags:

2

Answers


  1. 0

    To achieve a smooth animation from big to small circles, you need to update your keyframes to gradually decrease the size of the circles. Here’s how you can modify your code to achieve the desired animation effect:

    .loader {
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  background-color: transparent;
  background-image: radial-gradient(#363636 10px, transparent 1px);
  background-size: 30px 30px;
  animation: loaderout 2s linear infinite; /* Use linear animation for smooth transition */
}

@keyframes loaderout {
  0% {
    background-image: radial-gradient(#363636 10px, transparent 1px);
  }
  100% {
    background-image: radial-gradient(#363636 0.7px, transparent 1px);
  }
}

    In this modified version, the keyframes have two stages:

    One at 0% where the circles are bigger, and another at 100% where the circles are smaller. By using the linear timing function and removing the forwards value, the animation will smoothly transition between the two stages and continue indefinitely.

    Login or Signup to reply.
  2. 0

    You can try specifying the style change in animation in a little more detailed way with perecentage selectors, from 0% to 100%, define what happens at 10%, 20%, 30% and so on

    Example:

    `@keyframes loaderout {
    25%{
      background-image: radial-gradient(#363636 7.5px, transparent 1px);
    }
    50%{
      background-image: radial-gradient(#363636 5px, transparent 1px);
    }
    75%{ 
      background-image: radial-gradient(#363636 3px, transparent 1px);
    }
    100% {
      background-image: radial-gradient(#363636 0.7px, transparent 1px);
    }
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search