Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Home / Blogger Tips

How to Make Background Change Color Animation with CSS on Blogger

Post a Comment

MyShorTTips by RahmanCyber.NET as a blog that has a discussion on blogger tips, this time we provide an interesting tutorial, to change and change the blog background to make it look more dynamic. yes, you could say the blog background with animation without burdening the blog's speed by embedding the background in a gif format.

 

 

Color Change CSS Animations

 

 

But indeed, this is just a color change animation, however, I find it very interesting to give the impression that our blog has an animation. 

 

Please also note, that This CSS script is the basis, if you can improve it to make objects move or even change objects, because the nature of CSS 3 is Frame by Frame which is controlled using a keyframe (CSS 3 Animation Effect).

 

Actually, we can make a background with a .gif image, which is in the form of an animated frame by frame image, but usually it will increase the load time or the size of the website for page loading. . 


So that will most likely have an impact on the page speed score ... hehe

 

 

 

What is the GIF Image Format Like?

 

But don't worry, this is a trick not to use embed jpg / png / gif from outside our blogger, but we just animate the colors with CSS .

 

We know that CSS currently supports transitions that can be made for frame by frame movement / shaping animation.

 

 

 

CSS Keyframe Animation Creation Sketch

 

For this code, 4 keyframes are made to make it look like an animation, where each keyframe has a time setting for the alternation transition. The color used is Random #Color which you can customize yourself. For color reference, you can use the Color Picker or Hex Color.

 

 

 

The result will be like this

 

 

Gif by <a href="https://rahmancyber.net">RahmanCyber.NET</a> on <a href="/s/photos/bussiness?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

 

 

Waw.. interesting! ... ^_^

 

 

 

How to Make CSS Animations Change the Background Color?

 

 

1. Please enter first on the Blogger Dashboard

2. Then go to Edit HTML, how to Themes > Edit HTML, more details like this.

 

Screenshot by <a href="https://rahmancyber.net">RahmanCyber</a>


3. After that, searching for / b: skin by pressing CTRL + F (Windows) keyboard and CMD + F (For those using MAC)

4. Then please go to Copy Paste the code below before </b:skin>

 



body{
animation: colorBackground 122s infinite; 
-webkit-animation: colorBackground 122s infinite; 
-moz-animation: colorBackground 122s infinite; 
-o-animation: colorBackground 122s infinite; 
}


@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}

 

5. Save

6. After that take a look at your blog, what is it like now .. hehe. If successful, it will change to the background color ... :)





CSS Animation explained


The CSS code above is applied to the body section

You can see that there is a body code declaration here


body{

 

then, this is the keyframe, so there are 4 keyframes : animation, webkit-animation, moz-animation, dan o-animation.

Each has a timing, here I am using 122s, the smaller the value, the faster the replacement time, vice versa, the slower, the color change time will be getting slower too.

 Oh! there is infinite after setting the time, meaning no limit aka continuous looping ..

 
animation: colorBackground 122s infinite;
-webkit-animation: colorBackground 122s infinite;
-moz-animation: colorBackground 122s infinite;
-o-animation: colorBackground 122s infinite;
}

 

Now for the animation here, define each keyframe! a total of 4, according to the definition above.

For Background-Color and Color (including the font as well) it refers to defining the style the color that is on the body. Using commonly used code ... If the font doesn't want to change the color, just delete it  


contoh = color: #B461FB;

 

@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}

 

It is a sequence of colors from 0% to 100%, you can change it at will ... can use the color picker.


@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}






Suggestions and conclusions


Actually, by adding the code above < / b: skin > , you don't need to delete the default body background in your template. , 

Logically, the bottom one is the final result that is rendered by the browser, no matter what settings above before this .. what is clear is that there is only to change background-color and color in css body tag only, not other code ...


That's the logic in Blogger ... it is the same as javascript and so on, the final result is the one that is at the bottom. But it is certain that the target tag is the same.


For example, if you want to change the body, you have to do it.

 

Here's an example of the Body code RahmanCyber NET

 

 

 

So, usually for the template code modifiers, so as to minimize errors and so that those who apply the code are not confused because of an error, they always suggest ..

 

put it above the code </b:skin> or </head> or below the code <head> or just below the code <body> or .... right above the code </body>

 

right that..  Hehe, although if an error can be undoed, bro ..  :D

 

 

 

Hope it is useful!

 

 

 

 

 

 

 

 

Bonus, Code without changing the Font Color. 




body{
animation: colorBackground 122s infinite; 
-webkit-animation: colorBackground 122s infinite; 
-moz-animation: colorBackground 122s infinite; 
-o-animation: colorBackground 122s infinite; 
}


@keyframes colorBackground {
0% { background-color: #B461FB; }
20% { background-color: #74E588; }
40% { background-color: #F98585; }
60% { background-color: #50BFE1; }
80% { background-color: #4256EF; }
100% { background-color: #B461FB;}
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; }
20% {background-color: #74E588; }
40% {background-color: #F98585; }
60% {background-color: #50BFE1; }
80% {background-color: #4256EF; }
100% {background-color: #B461FB; }
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; }
20% {background-color: #74E588; }
40% {background-color: #F98585; }
60% {background-color: #50BFE1; }
80% {background-color: #4256EF; }
100% {background-color: #B461FB; }
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; }
20% {background-color: #74E588; }
40% {background-color: #F98585; }
60% {background-color: #50BFE1; }
80% {background-color: #4256EF; }
100% {background-color: #B461FB; }
}







Post a Comment for "How to Make Background Change Color Animation with CSS on Blogger "

Article original from MyShorTTips Stuff. Don't Copied or Sale. Protected by LAW. Thanks for Reading.