animate css gradient array
andykais
I have a parent div the width of the screen with a set height. I want to animate smaller boxes of equal length inside it. I want to 'slide' the color of the smaller boxes with single a gradient for the parent div. This is one way I have implemented it with every box being a div with variable width:
It has issues with mobile display so I need a new solution. I know that animating gradients with background position is possible, but what about animating portions of a gradient at a time.
The final version of this would include about 100 smaller boxes inside this div.I am looking for advice so if this makes more sense to just do in a canvas please let me know.
Ana
You could do it with each box being an individual gradient and then animate that gradient's background-size. However, I wouldn't recommend doing this. Animating 100 gradients is bound to be pretty bad for performance. As is animating the width of 100 elements (animating a scale() transform for each div would be better in that case).
If canvas is an option, then yes, use canvas, it's a much better choice in this case, both from a maintainability and from a performance point of view.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Animate CSS Gradient in Bootstrap nav
- 2
Snapsvg animate gradient moving
- 3
How to animate gradient?
- 4
How to animate shadow with gradient?
- 5
Animate gradient background
- 6
animate radial-gradient CSS3 : move from left to right?
- 7
animate radial-gradient CSS3 : move from left to right?
- 8
Can I animate the change of a background gradient?
- 9
Update and animate a gradient in Objective-c
- 10
How to animate a Radial Gradient smoothly outward
- 11
jQuery script to animate linear-gradient
- 12
How to animate JavaFX background gradient with light colors
- 13
CSS gradient checkerboard pattern
- 14
CSS: Bevel border with gradient?
- 15
CSS Gradient animation not working
- 16
Gradient text with css
- 17
CSS Gradient Background Not Whole
- 18
css gradient repeat on mobile
- 19
CSS Radial Gradient?
- 20
CSS gradient on border
- 21
Dynamic shading of gradient in css
- 22
Gradient with fading in CSS
- 23
CSS Gradient Poor Quality
- 24
Gradient text with css
- 25
CSS Arrow with Gradient
- 26
Gradient CSS arrow
- 27
CSS Gradient Constants
- 28
CSS animated gradient not rendering
- 29
CSS Animated Gradient Header
Comments