CSS Animation changing the background with many images
I have a css animation that uses a lot of images in the transition and this causes problems in the animation due to the number of image downloads that are made, making the animation have gaps
5 Replies
looks like you might need a sprite image for that so that all the images are downloaded in the same image file
yeah, i'm trying to do it, but moving the background doesn't feel the same way
the other options are animated image or a video. Maybe preload the individual images?? Would need a codepen or live link to see what is going on with the background image animation.
To move the background image you can use steps, so it does it frame by frame
Very different effect, but sorta the same idea
https://youtu.be/dldpud1PuL8
Kevin Powell
YouTube
Create a cool color-fill animation with CSS
Recently someone asked me about the animations on https://arena.net and it turned out they were using mask-image to pull off this cool effect. The animation is easy enough to create, though creating the mask itself is a bit time-consuming!
🔗 Links
✅ Code from this video: https://github.com/kevin-powell/fancy-mask-image-animation
✅ Inspiration f...