We use the animation-direction property and give it a value of alternate.In CSS, the default is 1 animation cycle. This is what makes the animation loop continuously. We use the animation-iteration-count property and give it a value of infinite.We use the animation-duration: property and give it a value of 10s - now our animation’s total duration is 10 seconds.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.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. Add the following CSS keyframes to your stylesheet:īody In CSS, animations keyframes work in percentages from 0% to 100%. Next up we’ll create the animation based on our plan. Okay, so we now have our 5 colors, that we’re going to throw into a looping animation that displays each color 2 seconds. You don’t need to memorize all those names (they are taken directly from Coolers), I just added them for good measure. These are the hex colors our upcoming background animation will loop through: I used to quickly generate a harmonious color palette for this example: Direct link to the Coolers palette A linear animation curve (the animation has the same speed from start to end).A duration of 10 seconds (each color gets displayed 2 seconds).
Since the purpose of this tutorial is to keep things simple, let’s use:
#CSS BACKGROUND ANIMATIONS CODE#
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.
#CSS BACKGROUND ANIMATIONS HOW TO#
Click here to find out more about Learn JavaScript if you’re interested.Learn how to make a simple animated background color loop with pure CSS by using keyframes and various CSS animation properties. If you loved this article, you’ll love learn Learn JavaScript-a course that helps you learn to build real components from scratch with Javascript. If you want to create a more complex animation, I highly recommend Javascript to create your animation instead. To use an animation you created, you can specify the animation in animation or animation-property.ĬSS Animations are great for animations that are relatively simple, because of the way is structured. They allow you to create multi-step transitions through the syntax. Wrapping upĬSS Animations are kind of a powered-up version of CSS Transitions. It’s far easier to calculate and synchronize timings with JavaScript. If the animation becomes complicated enough to exceed 4 steps, I recommend you animate your component with JavaScript. You want to trigger the animation when the screen loads (without listening for any JavaScript event).You need to transition more than 2 properties for a single element.You need a complex animation that CSS Transitions cannot provide you with (like the heartbeat animation for example).When should you use it?Īlthough CSS animations are useful, I recommend it only one or more if the following scenarios are met. You’ve learned so much about CSS animations. IMPORTANT! Always pause your CSS animations when you don’t need them! This stops the animations from moving, which saves precious computing power that can be used for other things. Mouse over the heart below and you’ll see a paused animation: You create a CSS Animation by defining an animation in animation-name CSS Animations are like CSS Transitions, except they’re way more powerful. The second way to animate your components is through CSS Animations.
0 kommentar(er)
