In todays experiment I’m going to show you how to create an animated gradient Bloc background using 2 classes and a single Custom Interaction.
The Classes 
The first class I’ll create is the actual gradient class (my-gradient), I’ll assigned a gradient background fill to this class and also a transform with rotate at 0 and scale at 3.
The second class I’ll create is the one that provides the rotation animation (animate-bg). This class has a transition that lasts 3 seconds with linear easing and no delay.
This class also has a transform with rotate set to 360 and scale at 3.
That’s the classes created, now for the nifty bit. 
The Nifty Bit 
You’re probably thinking I’m going to apply the gradient class (my-gradient) to the hero Bloc at the top of the website. That wouldn’t work because the animation would rotate the entire Bloc including the content within it. 
What we need is a sub-layer within the Bloc, behind the main content that we can rotate instead.
Bloc Masks to the rescue. 
Next, I’ll select the Bloc I’m going to use the animated gradient on and enable the Bloc Mask, taking care to set the mask to solid and reduce the mask opacity of the fill colour to 0 (making it invisible).
Next I’ll select the Bloc mask layer in the layer tree and assign my gradient class (my-gradient) and also assign an ID to this mask layer #my-background.
That’s the main setup complete, but we still need to make this gradient animate. Unfortunately Blocs doesn’t have a way to create CSS animations yet, we can obviously create animated transitions, but we need this to loop.
Fear not, a single Custom Interaction will save us from code. 
The Custom Interaction 
I’m now going to create my Custom Interaction that will make the background gradient animate and loop infinitely.
- The first rule will remove the animate-bg class form the Bloc Mask which has an ID of #my-background. (I’ll explain this step at step 4
). - I’ll then add a pause rule with a value of 100 (this is less than a second which would be 1000). This gives the browser a tiny moment to flush the graphics cache required for some browsers.
- After the pause, I’m going to add the class animate-bg to the mask layer (#my-background). This will cause the rotation that lasts 3 seconds.
- Finally I will call a custom interaction, but I will actually call the current interaction after a delay of 3 seconds (which is the same time the transition lasts in animate-bg class). Doing this creates an animation loop that lasts 3 seconds at a time. That is why we need to initially remove the animated-bg class in step 1. Because we want to reset the transform animation every 3 seconds (removing the animated-bg class does that).
Finally I want to trigger this animation when the page loads, which I’ll do in Page Settings by assigning the Custom Interaction that creates the animation loop.
Thats it, we now have an animated gradient background using 2 classes and a single Custom Interaction.
No code in sight. 
You can download this experiment file below to investigate. (It requires Blocs 6.1)
Rotate Gradient.bloc (859.3 KB)
Have fun playing around with this 