12 May 2018

I decided to do nothing to make a guide, on the theme of animation of the background, who can and wants such a miracle ..

I will not go into details, saying how and what, I'll tell you how to use it.

Result : work.slater-project.ru

You can observe a smooth change of background and adjustment of it, as well as a change of different color scales.

To add yourself such a background, it is enough for you to copy:

animation: gradient 10s infinite;
background-size: 1000% 1000%;

Substitute your class.

@keyframes gradient {
0% {
background-position: 0% 0%;
50% {
background-position: 100% 100%;
100% {
background-position: 0% 0%;

Just add to your stylesheet file.

Well, of course, choose one of the favorite color palettes, to do this, select your favorite color
Then copy its class:

background: linear-gradient(-45deg, #cc2b5e, #753a88);

And set your element on the site, exactly the same name class = "color-1" to the same element in which you set yourself the animation and background-size settings above.

If my words are difficult to understand, you can simply download the finished result with rghost and put yourself on local, or normal hosting.

Download : rghost

Result : work.slater-project.ru/animation-background/


I use google translate, I apologize for my english.
10 Jan 2015
Nice release I guess(?)