CSS animation not smooth with radial-gradient background
Question
I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code:
background: radial-gradient(black, black, transparent, transparent);
Using my code below works well to animate the background-color. However, as soon as I replace the background-color with this radial-gradient background the animation jumps and is no longer smooth. The behavior is consistent over multiple Browsers. This is a minimal working example of the issue I am having:
.global { background: lightskyblue; }.silver { // background: radial-gradient(black, black, transparent, transparent); animation: pulse 3s infinite; } @keyframes pulse { 0%, 100% { // background-color: black; background: radial-gradient(black, transparent, transparent, transparent); } 50% { // background-color: white; background: radial-gradient(black, black, transparent, transparent); } }
<body class="global"> <img src="pngwave.png" alt="test" class="silver" /> </body>
I have found this Stackoverflow question which is similar but did not help me solve my problem.
1 answers
solution1
1 ACCPTED 2020-04-19 13:56:56
You need to animate the background-size
.box { width: 200px; height: 200px; background: radial-gradient(farthest-side,black, transparent) center no-repeat; animation:pulse 2s linear infinite alternate; } @keyframes pulse{ from { background-size:50% 50%; } to { background-size:100% 100%; } }
<div class="box"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.