How do I center the linear gradient animation as it zooms it?
Question
I'm learning how to animate radial gradients by changing their background-positioning and the size of their elements. I've tried using flexbox to vertically and horizontally align.anim2 inside of.animcontain, as well as setting padding and margins, but nothing seems to be working. How do I go about zooming into the center of the radial gradient background without squishing it?
body { background-color: black; color: white; margin: 0; }.align { display: flex; flex-direction: column; height: 100vh; width: 100vw; justify-content: center; align-items: center; }.container { display: grid; grid-template-columns: repeat(3, minmax(80px, 20vmin)); grid-auto-rows: minmax(80px, 20vmin); grid-gap: 10px; }.container > div { border: 2px solid white; } @keyframes anim1 { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }.anim1 { animation: anim1 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; background-size: 100% 3000%; background-image: linear-gradient( to bottom, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red ); border-radius: 10px; } @keyframes anim2 { 0% { width: 100%; height: 100%; } 100% { width: 1000%; height: 1000%; } }.animcontain { overflow: hidden; border-radius: 50%; }.anim2 { background-image: radial-gradient( red, orange, yellow, green, blue, indigo, violet ); animation: anim2 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
<!DOCTYPE html> <html> <head> </head> <body> <div class="align"> <div class="container"> <div class="anim1"></div> <div class="animcontain"> <div class="anim2"></div> </div> <div class="anim3"></div> </div> </div> </body> </html>
2 answers
solution1
0 ACCPTED
Don't animate width/height, animate the background-size
body { background-color: black; color: white; margin: 0; }.align { display: flex; flex-direction: column; height: 100vh; width: 100vw; justify-content: center; align-items: center; }.container { display: grid; grid-template-columns: repeat(3, minmax(80px, 20vmin)); grid-auto-rows: minmax(80px, 20vmin); grid-gap: 10px; }.container > div { border: 2px solid white; } @keyframes anim1 { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }.anim1 { animation: anim1 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; background-size: 100% 3000%; background-image: linear-gradient( to bottom, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red ); border-radius: 10px; } @keyframes anim2 { 100% { background-size: 1000% 1000%; } }.animcontain { overflow: hidden; border-radius: 50%; background-image: radial-gradient( red, orange, yellow, green, blue, indigo, violet ); background-size: 100% 100%; background-position:center; animation: anim2 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
<div class="align"> <div class="container"> <div class="anim1"></div> <div class="animcontain"> </div> <div class="anim3"></div> </div> </div>
solution2
0 2021-03-03 22:12:54
To center anim2 you just have to add display grid with place-items center in animcontain class:
body { background-color: black; color: white; margin: 0; }.align { display: flex; flex-direction: column; height: 100vh; width: 100vw; justify-content: center; align-items: center; }.container { display: grid; grid-template-columns: repeat(3, minmax(80px, 20vmin)); grid-auto-rows: minmax(80px, 20vmin); grid-gap: 10px; }.container>div { border: 2px solid white; } @keyframes anim1 { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }.anim1 { animation: anim1 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; background-size: 100% 3000%; background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red); border-radius: 10px; } @keyframes anim2 { 0% { width: 100%; height: 100%; } 100% { width: 1000%; height: 1000%; } }.animcontain { overflow: hidden; display: grid; place-items: center; border-radius: 50%; }.anim2 { background-image: radial-gradient(red, orange, yellow, green, blue, indigo, violet); animation: anim2 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
<div class="align"> <div class="container"> <div class="anim1"></div> <div class="animcontain"> <div class="anim2"></div> </div> <div class="anim3"></div> </div> </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.
Related Question
How do I make it so my website zooms in and out without effecting the layout of the website from the center?
How Do I Modify My Linear Gradient Width to 100%?
How do I make linear-gradient background in email?
How do I apply a rainbow linear gradient filter to an SVG?
How do I center this text animation?
How do i center the animation of my paragraph?
CSS linear gradient from center
how to 2 colors as linear gradient side by side in center css
How to apply linear-gradient to image without loosing animation?
How do I maintain same website layout at all zooms and browsers?
Related Tags