animate css gradient array

Question

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.

you cannot, but you have background-size that works . a mixed of bg position/size/repeat or multiple gradient should do — G-Cyrillus
– G-Cyrillus, Commented Mar 17, 2016 at 14:52
You can't animate gradients like that. Use child divs or canvas. — KWeiss
– KWeiss, Commented Mar 17, 2016 at 14:54
This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. — Paulie_D
– Paulie_D, Commented Mar 17, 2016 at 14:56
here is my idea of size/position/repeat codepen.io/anon/pen/jqyGYP — G-Cyrillus
– G-Cyrillus, Commented Mar 17, 2016 at 14:59

Ana · Accepted Answer · 2016-03-17 15:06:29Z

1

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.

answered Mar 17, 2016 at 15:06

Ana

37.6k7 gold badges88 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andykais Over a year ago

If there are say 20 rows that each contain one of these animated divs, would using canvas still be manageable for mobile devices? Only one would animate at a time, but they all need to be rendered on the same page

vals · Accepted Answer · 2016-03-17 20:04:48Z

0

If the boxes are equal length, you can animate just the main background, using steps: (hover the div)

.test {
  width: 600px;
  height: 50px;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: background-position 40s steps(100);
}
.test:hover {
  background-position: -100% 0;
}

<div class="test"></div>

answered Mar 17, 2016 at 20:04

vals

64k11 gold badges96 silver badges150 bronze badges

Collectives™ on Stack Overflow

animate css gradient array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related