Dynamic Animated Gradient in CSS

I made an animating gradient with only CSS and one DOM element.

Demo time

This is the CodePen. You can see that I am only using one div tag and no JavaScript to achieve this. Check it out.

How does it work?

The stylesheet is pretty self-explanatory.

1. Using CSS Pseudo elements, I was able to spawn two children in front of my div element
2. By applying a linear-gradient background to each of the pseudo children, I was able to create the illusion of a smooth 3 colored gradient (when in fact, it is 2 separate elements with 2 color gradients joined together by the same color in the middle)
3. By using CSS Keyframe Animations, I was able to dynamically adjust the height of both children. With the same technique, I can control the distance offset from the top and move the bottom child accordingly. This keeps the total height in sync and the entire gradient in one piece

The result is a smooth and animated gradient. Yes, I know there might be a white line on Apple devices and some mobile devices. One solution is to let both children overlay each other in the middle to compensate for the inconsistent behavior from the calc CSS function. But I didn't implement that for a couple of reasons:

1. It makes the code less intuitive
2. I wanted the gradient to function as a filter for pictures or other DOM elements. Having an overlay will create this ugly strip in the middle

Fin

How do you find this implementation as compared to the others online? Hit me up on LinkedIn!