An experimental approach
In a previous article I had described how to animate CSS gradients. These are smaller CSS hacks which allow you to create the impression that a gradient is animated in itself.
In this article I would like to explain an experimental method with which the color gradient can actually be animated.
“True” gradient animation with SASS iterations
There is a possibility to animate gradients directly and immediately via CSS keyframes. This offers a little more possibilities, but is incredibly resource consuming and therefore only partially practicable. In a limited framework you can still use it here and there, if you want — in the end you get with this method considerably extended possibilities to work with animated CSS gradients, which are not feasible in the previously described techniques.
With a simple “From-To statement”, the course will change transition-free from one state to the other as already described before — this means that you can change the state very well, the browser only does not provide a transition between state 1 to state two. Nevertheless, we can create an animation by simply providing sufficient states. In CSS this would mean that we would have to define hundreds or even thousands of states (depending on the length of the animation) to be able to map them in a transition from 1 to state x — this would be far too complicated to make sense.
In SASS or SCSS (if you don’t know what SASS or a preprocessor is, we can help you here) we can create the necessary 100, 1000 or more single steps with only five lines of preprocessor code with the help of iterations or with reference to a While or For loop and a little simple math!
In my example, I want to generate a three-color gradient, which will be able to change its colors, its orientation and position, the process is as follows:
1. we set a variable “i” which gets the value 0.
2. we set a keyframe and name it accordingly to be able to call it later (isn’t magic).
3. we start a While loop, which ends as soon as you have passed this 100.
4. we count up our variable i. Depending on how long the animation duration is to be set later, a division into 1000 frames can also be useful — we simply count the variable i up by 0.1 instead of 1 — the loop now runs through 1000 times.
5. we have to define the steps or set our frames. We do this by calling our variable i again and adding a percent sign. The compiler will later convert this into the individual keyframes.
6. we have to define our animation with the help of a little really simple math.
In order for the colors to move from one side of the container element to the other, we must first determine the respective starting position of the colors. We now increase this value by our variable i and multiply it by any value. By the addition with i we create the basic animation, with the help of the multiplier we determine the speed of the movement. Now we do this for each color, which should move accordingly.
A smooth motion sequence requires approx. 24 frames per second. So you can calculate how many frames (animation steps) you need to make your animation run smoothly. Just use the following formulas:
AD = value of the animation duration
WL = loop passes
UV = value by which i is increased
AD * 24 = WL
100 / WL = UV
Changing the gradient colors
Determining the colors requires a little logical thinking. Now we start by setting the background-property and equipping it with a linear-gradient. Since we can also change the colors of the background with the solution described here, I will do without variables for the colors and fall back on HSL values. You can theoretically use HSLA-, RGB-, RGBA- or simple HEX-values — everybody likes it.
Since I want the hues to change during the animation, I add the hue to a certain value and simply count it up by my variable i by adding it to the fixed numerical value. If I want the hue to change faster or further, I can simply multiply it by any number (the higher the number, the greater the color change per step). So I can change the individual color value now differently fast or leave one constant, or, or, or.
Changing the gradient lines
CSS gradients can be given a position that can be specified in degrees for radial gradients, for example. Also the number of degrees can be added with our variable i like the color value and multiplied with another number. By adding i we create a rotation of the gradient, by the multiplier we determine the rotation speed.
Disadvantages and possible problems with this method
The method is impracticable in the sense that creating a loop of >100 runs during development can lead to smaller dropouts in the compilation process, which can be extremely annoying. This can be solved by swapping the progression animation into a separate SASS file, which only needs to be compiled when editing the CSS gradient animation.
Also in terms of performance, the animation of gradients or the execution of so many animation steps via CSS keyframes can be very strong on the graphics card, which is why you should rather make sure that you pay attention to short animation duration times and therefore need fewer frames. With my Ultrabook the fan went on already after a short time — not only uncomfortable, but in times of JavaScript reductions a real customer shock. Old and especially slow devices could also get performance problems and start to hook. This technology should therefore only be used in moderation and with caution.
Advantages of this method
As a developer, I can use this approach to have more influence on the animation of the process than would be possible with other techniques. Asynchronous movements and color changes are not possible with the other methods. However, it has to be said that even an image is a better solution for long motion sequences. In the end you still have the solution of the problem with JavaScript — which should be better than this experimental CSS solution.
If you’re interested in more information about animating background-gradients with CSS make sure to read part 1 of this article, where I provide an best practice approach to animate background gradients.