How to create a changing background color loop animation
In this tutorial, we’ll learn how to create a changing background loop animation.
The first step is to define the color scheme to loop. For this tutorial, I’ll be using a rainbow color scheme.
- #ff0000
- #ffa500
- #ffff00
- #008000
- #0000ff
- #4b0082
- #ee82ee
Implement the color change loop
Animations have a beginning and an end. They start at 0% and finish at 100%. You can define a state of the animation at any step and let CSS handle the transition between each one of them. Each step is called a keyframe.
Since we want each color to last an equal time, we’ll define the keyframes of the animation so that each color has its own keyframe.
Since we have 7 colors to loop through, we assign a keyframe for each of them.
@keyframes colorchange 0% background: #ff0000; > 14% background: #ffa500; > 28% background: #ffff00; > 42% background: #008000; > 56% background: #0000ff; > 70% background: #4b0082; > 84% background: #ee82ee; > 100% background: #ff0000; > >Next let’s create a class with an animation!
- animation: colorchange 45s Defines an animation with the keyframes we’ve set up previously. The whole animation (from 0% to 100%) will last 45 seconds.
- animation-timing-function: ease-in-out The animation has both a slow start and a slow end. You can find the complete list of timing functions [here] (http://The animation has both a slow start and a slow end).
- animation-iteration-count: infinite The animation will loop indefinitely.
- animation-play-state: running Starts the animation right away
.rainbow animation: colorchange 45s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: running; >Create the HTML element to animate
Let’s create a simple div to animate.
div class="rainbow" style="height:200px;width:200px;">div>How to create a rainbow loop background with CSS — Beginner Friendly
In 2013 Tumblr (simpler times), if you had a rainbow background on your theme, you were IT! All the popular Tumblrs had it. It was a thing. I remember trying to figure out how to create this magical background, asking others on Tumblr, but everyone would keep this information a top secret. I thought you needed to be an advanced wizard coder to create it. Turns out, it’s super duper easy. You only need CSS and a few lines of code!
🌈 It’s Rainbow Time 🌈
You can choose any background color you like. I chose pink because it’s the best color, obviously. You can also set the margin to whatever you want. But. wait a minute.
🤔 Animations? 🤔
- bgColor : what we name our animation, for clean code and ease of understanding.
- 50s : we set the time duration we want for each color.
- infinite : this makes the color transition loop indefinitely, creating that «rainbow effect».
- linear : this makes the color transition smooth, so the colors «fade» into each other.
🔑 Keyframes 🖼️
The keyframes, are, well, the key frames of our animation. They allow us to build and define multicomponent, multi-state animations — from A to B to C to D to E and so forth. When we use keyframes, we can control the timing of the animation: when it starts, how many times it should repeat, and how long it should last.
To be very technical:
Keyframes start with an offset of 0% and end with an offset of 100%. The % is a percentage of the time through the animation sequence at which the specified keyframe should occur.
Keyframes let us build complex animations, but really, they’re not complex at all.
Let’s define our keyframes for our beautiful rainbow loop background:
@keyframes bgColor < 10% < background-color: #a43535; >20% < background-color: #ff7b00; >30% < background-color: #ffff51; >40% < background-color: #a7ff4e; >50% < background-color: #7addfe; >60% < background-color: #6b6bfd; >70% < background-color: #ca61ff; >80% < background-color: #ff54af; >90% < background-color: #f3bbff; >> Keyframes span from a range of 100%, and you can split it up into as many pieces as you’d like within that 100%. So choose your colors, assign them into however many percentages you need (10% per color is easy — you can also do 25%, or 5%, or 1% if you’re brave. ) and voila!
Literally, that’s it. You’re done. Coding queen/king come through!
Rainbow Animation With CSS
Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will create a rainbow animation. To build this animation, we need HTML and CSS. You can use this animation as a loader/spinner.
If you are looking for more such tutorials to improve your CSS skills, you can check out this playlist here. This playlist consists of a bunch of animations created with Pure CSS.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel, where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We start by creating a project folder called – ‘Rainbow Animation’. Inside this folder, we have two files. The first file is index.html which is the HTML document. And the second file is style.css which is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document. HTML creates the elements necessary to create the structure and layout of our project.
CSS:
Next, we create the rainbow shape and add animation to these shapes using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* < padding: 0; margin: 0; box-sizing: border-box; >body < background-color: #8eb0ff; >.container < height: 34em; width: 34em; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.6em; box-shadow: 0 1.5em 3.5em rgba(32, 47, 80, 0.2); >.container:after < content: ""; position: absolute; height: 50.5%; width: 100%; background-color: #ffffff; bottom: 0; border-radius: 0 0 0.6em 0.6em; >.rainbow-color < background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); left: 50%; animation: spin 5s infinite; transform-origin: 50% 0; >@keyframes spin < 30% < transform: translate(-50%, -50%) rotate(180deg); >55% < transform: translate(-50%, -50%) rotate(180deg); >85% < transform: translate(-50%, -50%) rotate(360deg); >100% < transform: translate(-50%, -50%) rotate(360deg); >> .rainbow-color-1 < height: 11.25em; width: 22.5em; border: 1.25em solid #fd004c; border-top: none; top: calc(50% + 5.62em); border-radius: 0 0 11.25em 11.25em; animation-delay: 0.8s; >.rainbow-color-2 < height: 10em; width: 20em; border: 1.25em solid #fe9000; border-top: none; top: calc(50% + 5em); border-radius: 0 0 10em 10em; animation-delay: 0.6s; >.rainbow-color-3 < height: 8.75em; width: 17.5em; border: 1.25em solid #fff020; border-top: none; top: calc(50% + 4.37em); border-radius: 0 0 8.75em 8.75em; animation-delay: 0.4s; >.rainbow-color-4 < height: 7.5em; width: 15em; border: 1.25em solid #3edf4b; border-top: none; top: calc(50% + 3.75em); border-radius: 0 0 7.5em 7.5em; animation-delay: 0.2s; >.rainbow-color-5 < height: 6.25em; width: 12.5em; border: 1.25em solid #3363ff; border-top: none; top: calc(50% + 3.12em); border-radius: 0 0 6.25em 6.25em; >@media screen and (max-width: 550px) < body < font-size: 12px; >>
Your rainbow animation is now ready. You can now go ahead and customize it the way you like by experimenting with colours, animation duration, animation delay etc.
If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so don’t forget to drop your queries, suggestions or feedback below.
Happy Coding!
- Tags
- animations with css
- css animated art
- css animation
- css animation effects
- css animation tutorial
- css art
- css drawing
- css keyframes
- css loading animation
- CSS Tutorial
- rainbow animation css
Rainbow Drops Background Animation [No JS]
I’ve been playing around with pure CSS/no JS background animations, inspired by all the beautiful creations that can be found on CodePen. Today I made a rainbow drops background animation that I’m really proud of. It was also my first time using Haml and SCSS — or any HTML/CSS preprocessors for that matter — so I learned a lot while making this (and had a ton of fun!). Hope you enjoy! Connect with me
CodePen
Twitter
GitHub
Top comments (0)
Read next
Create a movie card using Tailwind CSS and one code
Lock Unlock CSS Animation
TailwindCSS vs. UnoCSS
Pure CSS Pencil Preloader
Former special education teacher turned web dev. Passionate about inclusion. Word Warrior, beware: high levels of sass, irony & high/(low)-brow humor ahead.
Trending on DEV Community Hot
Once suspended, nats_tech_notes will not be able to comment or publish posts until their suspension is removed.
Once unsuspended, nats_tech_notes will be able to comment and publish posts again.
Once unpublished, all posts by nats_tech_notes will become hidden and only accessible to themselves.
If nats_tech_notes is not suspended, they can still re-publish their posts from their dashboard.
Once unpublished, this post will become invisible to the public and only accessible to Nat’s Tech Notes.
They can still re-publish the post if they are not suspended.
Thanks for keeping DEV Community safe. Here is what you can do to flag nats_tech_notes:
nats_tech_notes consistently posts content that violates DEV Community’s code of conduct because it is harassing, offensive or spammy.
Unflagging nats_tech_notes will restore default visibility to their posts.
DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey.
Built on Forem — the open source software that powers DEV and other inclusive communities.
Made with love and Ruby on Rails. DEV Community © 2016 — 2023.
We’re a place where coders share, stay up-to-date and grow their careers.