Background animation loop css

CSS Background Animation Loop

Hello Friends, I hope you are all well. Today we will share funny CSS animation with you. In this project, we have created a snippet using CSS background loop animation which looks like a superhero flying in the sky. We share regular videos on front-end development on our YouTube Channel. You can subscribe to our channel if you want. Take a good look at the video tutorial below for this snippet.

I hope you have watched the video tutorial and understood the snippet. First, a PNG image is taken inside a div in the HTML part. Then in the CSS part, the image is taken in the middle with the display grid property. Then a background image is taken for the body element and, an infinite animation is set for the loop animation. This simple snippet is then done using the background-position property in the CSS Keyframes animation.

To create this project, first, you need an HTML file with an extension of .html. Then you need to create a CSS file with the extension of .css. Attach the external CSS to HTML. Then copy the source code from the code box below and paste it into your file. If you have a problem with the code below, you can also download the code from the download button.

Hopefully, you have successfully implemented the code. If you like this simple snippet, then share our blog articles. Follow us on social media for more projects like this. Thank you so much for visiting us.

Источник

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 😊

Источник

Background animation loop css

How to Create A Simple Looping Background Colour Animation With CSS

In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes along with various CSS animation properties.

In our example, we are going to set this to the body element. However, you can apply the code to any HTML element of your choice either with an id or class . You can check out the CodePen here if you prefer.

Before we begin, let’s understand the looping animation and how we want the end result to appear:

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

In this tutorial, we are going to keep things simple and use:

• Five different background colours
• A duration of ten seconds (each color gets displayed two seconds)
• A linear animation curve (the animation has the same speed from start to end)

We used Coolers.co to generate a nice colour palette for our example:

If you want to use the same colour palette then visit this link.

These are the hex colours for the background animation we used in our example:

• Sunset Orange: #EE6055;
• Medium Aquamarine: #60D394;
• Pale Green: #AAF683;
• Mellow Yellow: #FFD97D;
• Vivid Tangerine: #FF9B85;

Right, so lets now dig into it!

How to Create the looping CSS animation

The CSS animations keyframes work in percentages from 0% to 100% . So let’s start by adding the following CSS code:

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

We have now created the keyframe property called backgroundColorPalette with five separate intervals; these have been dividing evenly between 0% and 100% .

With this part done, now we can create the CSS rules to animate the body and put our backgroundColorPalette keyframes to action.

Now, let’s add the following CSS animation properties inside your body selector:

If you’ve done everything correctly, you will now have a background colour animating evenly between five different colours with a linear animation. Pretty cool aye?

So how does the CSS work exactly?

• First of all, we added the animation-name property and set the value to backgroundColorPalette . Now the background colour keyframes we previously created were then assigned to the body element.
• We used the animation-duration property and gave it a value of 10s – This sets the total duration time to ten seconds to process the keyframes we defined.
• We used the animation-iteration-count property and set the value to infinite . This is so the animation can run in a constant loop and run indefinately.
• We used the animation-direction property and give it a value of alternate . What this does is it makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an not so attractive jump which happens if you use the normal animation direction value.

And there you have it, liked our tutorial? Then drop us a comment below. If you need any help or further explanation then get in touch!

Live Example

So we decided to create this animation below so you could see how it looks like. We added this HTML;

then simply replaced body with the ID of the DIV element which in our example is; #background-transition

ANIMATED BACKGROUND

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

Источник