Css animate background color

CSS ANIMATIONS (Changing background colors and positions)

I have been learning about CSS basics for sometime now and today, I decided to share what I learnt. I mostly decide to post a blog on the ones I find confusing (sort of helps me to understand better, almost like teaching myself). We are going to be discussing about CSS animations, focusing mainly on background colors and positions.

CSS ANIMATIONS

📌 CSS animations help create moving elements and ‘animations’ in your webpage without the use of JavaScript but mainly CSS. To make a div element (container) move to different places on a webpage and change colors, we have to use something called a keyframe . CSS styles specified inside the keyframe rule would allow the animation to gradually change from a current style, to a new style at a certain time. Lets say we have a scenario where we want to move a box from one point to another of the screen. Whiles the box moves, we want the color to change at a specified time. The timing the box would have to be specified in the keyframe by percentages (this could be explained further in the post). This is when the animation-duration property how long an animation would take to complete. Understanding the animation-duration property and the keyframe would allow you to change colors of an element and also, change their positioning. To make it simpler to understand, just take the animation-duration to be the time your animation would last (could be 10s, 20s or even less depending on your preference). And the keyframe to be a property that tells the box to change a color at a specified time. (If you are lost, don’t be. I am going to give a demonstrative explanation)

Looking at the block of code above, you would realize a ‘webkit. ‘ thingy over there. It is basically the code for safari because, some of the standard CSS properties do not work with the safari (ios) browser. It is advisable to always include it alongside with the standard properties just incase. I stated the animation duration to be 4s (seconds). And the keyframe has some percentages aligned to each background color. This means that, your animation has 4 seconds to run. Within 4 seconds; 📌At 0% (of the 4s, which is the going to be the default color when you run the code), the background color would be red and be at the left side of the screen (because left is set to 0px). 📌At 25%, the background color would then change to the color yellow and put 200px on the left side of the box (this would move the box to the right). 📌At 50%, the background color would change to blue and move downwards to the right because there is 200px for both left and top. 📌At 75%, the background color would change to green and move back to the left downwards because the left is now 0px and top is 200px. Lastly at 100%, it would go back to its original position and color. This block of code above would make the box move in four corners. The importance of the keyframe is to specify the styles you would want to add to your animations.

CONCLUSION

One thing you should always specify is the number of the seconds the animation duration would take. And the percentages is well (in the keyframe). This is because, the default value is always zero (0) so if you forget to indicate the exact time the animation should last, it would not take any effects. Thanks for reading!

Источник

Background Color Animation With CSS (Simple Examples)

Welcome to a tutorial on how to do background color animation with pure CSS. Once upon a time in the Stone Age of the Internet, doing color animations involves crazy scripts and fighting with digital monsters. But thankfully, it is a breeze with modern CSS.

1. Use CSS transition to progressively change the background color.
   • Demo
   • #demo < transition: background-color 1s >
   • document.getElementById(«demo»).style.backgroundColor = «red»;
2. Use CSS keyframes to specify a sequence of background colors.
   • @keyframes col < 0% 50% 100% >
   • #demo

That covers the basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CSS BACKGROUND COLOR ANIMATION

All right, let us now get started with the examples of background color animation with CSS.

1) BACKGROUND COLOR TRANSITION

#demo < /* (A1) ALL WE NEED : CSS TRANSITION */ transition: background-color 1s; /* (A2) COSMETICS */ width: 100%; height: 100px; background-color: #eee; >/* (A3) BACKGROUND COLOR CHANGE */ #demo.swap

• (B1) We have a that defaults to background-color: #eee .
• (B2) Clicking on the button will toggle the .swap CSS class on #demo , effectively changing it to background-color: #e00 .
• (A1) Normally, the background color change will be instantaneous. But that single line of transition: background-color 1s is all it takes to do animation magic.

2) BACKGROUND COLOR KEYFRAME SEQUENCE

/* (A1) ANIMATION KEYFRAMES — BACKGROUND COLOR SEQUENCE */ @keyframes morph < 0% < background-color: red; >50% < background-color: green; >100% < background-color: blue; >> /* (A2) COSMETICS */ #demo < width: 100%; height: 100px; background-color: #eee; >/* (A3) BACKGROUND COLOR ANIMATION WITH KEYFRAMES */ #demo.swap

• (A1) Start by creating a set of @keyframes to define the sequence of background colors.
• (A3) Then, attach the keyframe sequence to a CSS class.
• (B) This is the same mechanism as the previous example. We only need to attach .swap to #demo , and this will effectively trigger the animation sequence.

3) BACKGROUND COLOR ANIMATION LOOP

  /* (A1) BACKGROUND COLOR SEQUENCE */ @keyframes morph < 0% < background-color: red; >33% < background-color: green; >66% < background-color: blue; >100% < background-color: red; >> /* (A2) ATTACH SEQUENCE */ #demo By now, this should be pretty self-explanatory. As above, all we need is to create a set of @keyframes and attach it to an element/class. But in this example, we set the animation to loop infinitely, no Javascript is required to run.

4) BACKGROUND COLOR ANIMATION WITH OPACITY

  /* (A1) BACKGROUND COLOR SEQUENCE */ @keyframes morph < 0% < background-color: rgba(0, 0, 0, 0); >50% < background-color: rgba(255, 0, 0, 0.5); >100% < background-color: rgba(0, 255, 0, 1); >> /* (A2) ATTACH SEQUENCE */ #demo Finally, this is for you guys who are wondering how to add opacity to the equation – Simply use rgba() instead of the “usual” hex or color name.

EXTRA BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

COMPATIBILITY CHECKS

CSS animation and transitions are generally well-supported on all modern browsers.

LINKS & REFERENCES

YOUTUBE TUTORIAL

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has helped you to better understand CSS animations on the background color. If you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

Источник

How to Make a Simple Looping Background Color Animation With CSS

Learn how to make a simple animated background color loop with pure CSS by using keyframes and various CSS animation properties.

In this example, we’re targeting the HTML element directly with CSS, but you can apply the following code example to any HTML element, class, or id.

You can use this demo as a reference.

Note: this code won’t work in IE9.

Even if you don’t know exactly how your result should end up it’s always practical to have an idea about the direction you’re going. Let’s establish a couple of things about the looping animation before we start coding:

• How many background colors do we want to use?
• How long should total animation duration last?
• What type of animation type should we use?

Since the purpose of this tutorial is to keep things simple, let’s use:

• 5 different background colors
• A duration of 10 seconds (each color gets displayed 2 seconds)
• A linear animation curve (the animation has the same speed from start to end)

I used Coolers.co to quickly generate a harmonious color palette for this example:

These are the hex colors our upcoming background animation will loop through:

• sunset orange: #EE6055
• medium aquamarine: #60D394
• pale green: #AAF683
• mellow yellow: #FFD97D
• vivid tangerine: #FF9B85

You don’t need to memorize all those names (they are taken directly from Coolers), I just added them for good measure.

Okay, so we now have our 5 colors, that we’re going to throw into a looping animation that displays each color 2 seconds.

Next up we’ll create the animation based on our plan.

Creating the looping CSS animation

In CSS, animations keyframes work in percentages from 0% to 100% . Add the following CSS keyframes to your stylesheet:

/* Standard syntax */ @keyframes backgroundColorPalette  0%  background: #ee6055; > 25%  background: #60d394; > 50%  background: #aaf683; > 75%  background: #ffd97d; > 100%  background: #ff9b85; > >

Now we have a keyframes property called backgroundColorPalette with 5 color intervals, which are evenly divided over from 0% to 100% of the animation.

Now it’s time to create the body element’s CSS rule-set, so we can take our keyframes color palette and put it to use.

Add the following CSS animation properties inside your body selector rule-set, and look what happens in your browser window:

body  animation-name: backgroundColorPalette; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: alternate; >

If you did everything right, you should now have continuously running background color animation that smoothly transitions from color to color with 2 second intervals.

The Code

• First, we add the animation-name property and give it a value of the backgroundColorPalette — now the background color keyframes we created earlier are assigned to the body element.
• We use the animation-duration: property and give it a value of 10s — now our animation’s total duration is 10 seconds. You can also use milliseconds 10000 .
• We use the animation-iteration-count property and give it a value of infinite . This is what makes the animation loop continuously. In CSS, the default is 1 animation cycle.
• We use the animation-direction property and give it a value of alternate . This makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an ugly jump which happens if you use the normal animation direction value.

By default, the CSS animation speed curve type is set to linear. This means that we don’t have to declare the property in our CSS rule-sets when we want to use it. That’s why the animation speed curve in our example earlier runs linearly.

However, you might still want to add animation-timing-function: linear; to your CSS rule-set to make your code more expressive — especially if you work in a team. It’s hard to remember all the property values are enabled by default in CSS.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник