Cartoon Try Again Gif 360 by 450 Cartoon

Used well, CSS animation is an incredibly useful and powerful tool. It can add together interest or creative excitement, direct the user's eye, explain something quickly and succinctly, and improve usability. For that reason, recent years have seen more than and more than blitheness on sites and in app.

In this article, we circular up some of the coolest CSS animation examples we've seen, and prove you how to recreate them. Read on for a range of in-depth tutorials and inspiring furnishings (and links to their code) to explore.

What is CSS animation?

CSS blitheness is a method of animating certain HTML elements without having to use processor and retentivity-hungry JavaScript or Flash. There'southward no limit to the number or frequency of CSS properties that can be inverse. CSS animations are initiated by specifying keyframes for the blitheness: these keyframes contain the styles that the chemical element volition have.

While information technology may seem limited when it comes to animation, CSS is actually a really powerful tool and is capable of producing beautifully smooth 60fps animations. "Delivering thoughtful, fluid animations that contribute meaningful depth to your site doesn't have to be difficult," says front end end spider web developer Adam Kuhn. "Modern CSS backdrop now paw you nearly all of the tools you'll need to create memorable experiences for your users."

The best animations still have their roots in Disney's classic 12 principles of animation – you'll meet several mentions of that throughout these CSS blitheness examples, so information technology'southward worth checking out that commodity before you lot get started. You might also want to explore our roundup of swell animated music videos for further examples and inspiration.

The golden dominion is that your CSS animations shouldn't be overblown – even a small movement tin have a big touch on, and as well much can be distracting and irritating for users. Here are our favourite examples and how to recreate them.

01. Fun mouse effect

• Author: Donovan Hutchinson

This is a fun effect that follows your mouse around. It could be useful when you desire to depict attending to an element on your page.

We need very little HTML for this effect:

          <div course="demo">   <div course="perspective-container">     <div class="card"></div>   </div> </div>                  

First, nosotros position the demo and gear up perspective for our 3D transform:

          .demo {   background-colour: hsl(207, 9%, 19%);   display: flex;   align-items: center;   justify-content: center;   height: 100vh;   width: 100%; }  .perspective-container {   perspective: 800px; }                  

Then style the div we want to animate:

          .card {   background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);   background-size: cover;   box-shadow: 0 0 140px 10px rgba(0,0,0,.5);   position: relative;   summit: 300px;   width: 500px;   overflow: hidden; /* Try removing this to see how the sheen works! */   --sheenX: 0; /* Set these with JavaScript */   --sheenY: 0; }                  

Here nosotros set a background, and then we set overflow to hidden and so that we tin add a sheen effect later on. We as well fix css variables, sheenX and sheenY.

These sheen variables will help position the sheen effect. We use them in our card'due south after pseudo-chemical element:

          .menu::afterward {   content: "";   position: absolute;   elevation: -400px;   correct: -400px;   bottom: -400px;   left: -400px;   background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) fifty%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);   transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }                  

Here we're making certain the pseudo-element is bigger than the container. This will give u.s.a. something to slide effectually on top of the carte du jour using transform.

The transform holding is making utilise of those CSS variables nosotros set earlier. We will set those with JavaScript. Let's fix upwardly the JavaScript to get-go heed for mouse events:

document.onmousemove = handleMouseMove;

We now need a handleMouseMove function to handle onmousemove:

          office handleMouseMove(event) {   const height = window.innerHeight;   const width = window.innerWidth;   // Creates angles of (-20, -20) (left, bottom) and (xx, 20) (correct, summit)   const yAxisDegree = event.pageX / width * 40 - 20;   const xAxisDegree = event.pageY / acme * -1 * 40 + xx;   target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;   // Set the sheen position   setSheenPosition(outcome.pageX / width, issue.pageY / width); }        

Our function takes the window height and width and creates an bending on the Ten and Y axes. We then set these to the transform style of our carte. This gives the card an angle based on the mouse!

We next call a part to prepare the pseudo-element's position:

          role setSheenPosition(xRatio, yRatio) {   // This creates a "distance" up to 400px each direction to offset the sheen   const xOffset = 1 - (xRatio - 0.v) * 800;   const yOffset = 1 - (yRatio - 0.5) * 800;   target.way.setProperty('--sheenX', `${xOffset}px`)   target.style.setProperty('--sheenY', `${yOffset}px`) }                  

Our pseudo-element looks best when it moves in the opposite direction to the mouse. To achieve this we create a number betwixt -0.5 and 0.5 that changes in the opposite direction by calculating the ratio by -1.

We multiply this number past 800 as we desire it to scale up to a maximum of 400px, which is how far we set the sheen pseudo-element outside the carte.

Lastly we set these offset values to our CSS variable properties, and the browser'due south renderer does the rest.

We at present have a card that turns to face our mouse while the sheen effect moves in the opposite direction on top. This creates a dainty, eye-catching effect.

02. The large reveal

• Writer: Adam Kuhn

Animated content reveal effects seem to be quite popular right at present, and used properly they can capture user focus and engage your audience. You've seen this before: a block of color grows from ane side or another horizontally or vertically, and and then retreats to the opposing side, this time revealing some text or an epitome beneath. It's a concept that might seem tricky but really relies on just a few things.

First, we'll set upwardly our chemical element positioning (download the full code here) – ascertain it as relative (only static will fail in this case). In text cases it'south best to allow automated meridian and width, although a bit of padding doesn't injure. We'll too ascertain a transform origin, in the case of the parent element we want to use the starting position. Since nosotros want the element hidden initially, we'll employ a calibration transform along the appropriate axis to shrink it.

Next, a a pseudo element to mask our parent, setting the transform origin to the opposing choice. Finally, string together the animations, using either the timing functions or delays to starting time each.

Annotation, nosotros've showtime the parent and pseudo element's animations with a delay telling the box that hides our text to reveal information technology just later on the chemical element itself has fully scaled into view. Cheque out the Codepen below.

03. Stagger on

• Author: Adam Kuhn

One time you've begun to accumulate a decent library of various easing snippets, it's time to look into other ways to enhance the depth of your animations, and one of the best ways is to offset your animated elements.

It's all likewise common that a JavaScript trigger is set to initiate a bunch of animations based on whorl position, but to discover all items moving finer in tandem. Fortunately CSS itself provides a simple belongings that can make (or break) your animated experience: animation-filibuster.

Allow's say, for instance, we take a grid of images we want to animate into frame when the user scrolls. There's a number of ways we could trigger this, most likely calculation classes to the elements equally they enter the viewport. This can be quite a heavy lift on the browser, however, and can be avoided by simply adding a single class to a container element and defining animation delays on child elements.

This is a peculiarly good apply case for preprocessors like SCSS or LESS, which allow us to use a @for loop to iterate through each element.

          #parent{ .child{      blitheness: animationName 1.5s ease-in-out 1 forwards; @for $i from one through 20{      &:nth-of-type(#{$i}){ animation-filibuster:#{$i/10}s;                  } }     } }        

Hither yous'll see with SCSS we are able to loop through each :nth-of-blazon selector, then apply an animation delay based on each child element's numerical value. In this example yous'll note we divide up our timing to reduce each increment to a fraction of a second. While offsetting your animated elements can lend emotion to your animation, as well much delay tin make information technology feel disjointed. Check out this CodePen below.

04. Squigglevision

• Author: Adam Kuhn

SVG filters provide a keen way to accomplish a natural, paw-drawn experience and escape some of the apartment-feeling rendering constraints of CSS lone. Animating them tin can further enhance the effect.

Case in bespeak: Squigglevision. Yeah, this isn't a technical term known to most animators, but you've surely seen information technology employed in cartoons. The thought is that the edges of these animated elements are not simply somewhat jagged and crude-hewn, merely these crude edges apace variate, frame by frame, making them feel equally though they've been ripped from the pages of a sketchbook and brought to life.

To achieve this effect, we can include an SVG on our page with multiple filters and slight variations in turbulence levels for each. Next, we'll set up our blitheness timeline, calling each filter in its ain keyframe. It's of import to play with the timing durations as we anticipate the animation will experience 'jumpy' but don't want it so slow as to experience disjointed or so fast as to feel crazy.

To that end, it's important to annotation that CSS lacks the ability to smoothly transition between SVG filters as in that location is no way to access properties such as turbulence and scale, and so these types of animations should e'er be expected to be choppy.

05. Tumbling lettering

• Every bit seen on: Game of the Twelvemonth
• Writer: Leon brown

Google'due south Game of the Twelvemonth features a playful CSS animation on the homepage, with the championship words tumbling and bumping into 1 another. Here'southward how it was done.

The first step is to define the webpage certificate with HTML. It consists of the HTML certificate container, which stores a head and body department. While the head section is used to load the external CSS and JavaScript resources, the body is used to store the page content.

          <!DOCTYPE html> <html> <head> <championship>Off Kilter Text Blitheness</championship> <link rel="stylesheet" type="text/css" href="styles.css"/> <script src="code.js"></script> </head> <body>   <h1 grade="animate backwards">The Blithe Title</h1>   <h1 form="animate forrad">The Blithe Title</h1>   <h1 course="animate mixed">The Animated Championship </h1> </body> </html>        

The folio content consists of three h1 championship tags that will show the different variations of the animation result. While whatever text can exist inserted into these tags, their animation is defined by the names in the class aspect. The presentation and animation settings for these class names will be divers in the CSS later on.

Side by side, create a new file called 'code.js'. We want to notice all folio elements with the animate class and create an array listing representing each give-and-take of the inner text. The initial animation delay is also defined in this footstep. Folio content is not bachelor until the page has fully loaded, so this code is beingness placed inside the window'south load event listener.

The discussion content of the animation items needs to exist contained inside a bridge element. To practice this, the existing HTML content is reset to blank, then a loop is used to make the word in the identified 'words' listing a bridge element. Additionally, an animationDelay style is applied – calculated in relation to the initial delay (specified below) and the word's index position.

          window.addEventListener("load", office(){ 	var delay = ii; 	var nodes = document.querySelectorAll (".breathing"); 	for(var i=0; i<nodes.length; i++){ 		var words = nodes[i].innerText.split(" "); 		nodes[i].innerHTML = ""; for(var i2=0; i2<words.length; i2++){ 			var item = document.createElement("span"); 			detail.innerText = words[i2]; 			var calc = (delay+((nodes.length + i2)/3)); 	particular.style.animationDelay = calc+"s"; 			nodes[i].appendChild(item); } 	} });        

Create a new file called styles.css. Now we'll set up the presentation rules that volition exist part of every word element in the animation, controlled by their span tag. Brandish as cake, combined with centred text alignment, will result in each give-and-take actualization on a separate line horizontally aligned to the middle of its container. Relative positioning will be used to animate in relation to its text-menstruum position.

          .breathing span{ 	display: cake; 	position: relative; 	text-marshal: center; }        

Animation elements that have the backwards and forwards class have a specific animation applied to them. This step defines the animation to utilise to bridge elements whose parent container has both the breathing and backwards or forwards class.

Note how at that place is no space between the breathing and backwards class reference, meaning the parent element must have both.

          .animate.backwards > span{ 	animation: animateBackwards 1s ease-in-out  forward; } .animate.frontwards > span{ 	animation: animateForwards 1s ease-in-out  forwards; }        

The mixed blitheness is defined using the same settings used for the forwards and backwards animations. Instead of applying the animations to every child of the parent, the nth-child selector is used to apply alternating animation settings. The backwards animation is applied to every even-number child, while the forwards animation is applied to every odd-number child.

          .breathing.mixed > span:nth-child(even){ 	animation: animateBackwards 1s ease-in-out  forwards; } .breathing.mixed > span:nth-child(odd){ 	animation: animateForwards 1s ease-in-out  forwards; }        

The animations nosotros've only created are made with an initial 'from' starting position, with no vertical position or rotation adjustment. The 'to' position is the final land of the animation, which sets the elements with an adjusted vertical position and rotation land. Slightly dissimilar ending settings are used for both animations to avoid the text becoming unreadable due to overlap in mixed animations.

          @keyframes animateForwards { 	from { elevation: 0; transform: rotate(0deg); } 	to { summit: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { 	from { height: 0; transform: rotate(0deg); } 	to { height: 1em; transform: rotate(25deg); } }        

06. Flip book

• Writer: Adam Kuhn

When animating with CSS sometimes a dead simple approach is necessary. And in that location are few simpler animation methods than the flip book. Using steps () as our timing function, we are able to replicate this effect. While this might audio choppy and directly contradict our mission to maintain fluidity, with the right pacing it tin can feel just as seamlessly organic.

So how does it work? We define our animation easing office with only a few additional parameters – telling our animation how many steps are needed and at which bespeak during the kickoff step we'd like to begin (beginning, finish) – looking a trivial similar this, for instance steps (10, start).

Inside our keyframes, we tin at present designate an finish indicate to our blitheness: for this case let's presume our blitheness is 10 seconds long and we're using ten steps. In this case, each step will exist one second long, immediately moving to the following one-2d frame with no transition betwixt.

Once more, this seems to fly in the face of fluidity, simply here's where stepped animations can actually shine. Nosotros tin incrementally iterate through a sprite sheet and animate frame-past-frame just like a flip book. By defining frames of equal size merely compiling them onto a unmarried horizontal (or vertical) paradigm, we can set this image as an chemical element background and define a pixel or pct background position as an cease betoken to our animation, allowing a unmarried pace for each frame. The sprite sheet will and so shift and populate the chemical element frame by frame with a fresh background prototype based on its position.

Let's take a look at an example. In this case some sets of animated legs appended to some text characters. First, we'll ascertain our animation name, duration, stride count, get-go position and iteration count:

          blitheness:runner 0.75s steps(32, terminate)  infinite;        

Over again, annotation that the duration is relatively speedy at less than 1 full 2nd for 32 total frames. Adjacent, we'll define our keyframes:

          @keyframes runner{       from{       background-position:0px 50%;}       to{       groundwork-position:- 1280px l%; }}        

Note that the vertical positioning of the image is consequent throughout, which tells us that the sprites are horizontally stretched across the image, which is 1280px in total width. Equally nosotros've divers 32 full frames for that image, nosotros can deduce that each frame should be 40px wide. Cheque out this Codepen below.

It's important to notation that a large sprite canvass can potentially be a severe elevate on performance, so be sure to size and compress images. With a well-crafted sprite sheet and an appropriate animation duration you now have a smooth blitheness able to convey complex motions.

07. Blowing bubbles

• As seen on: 7UP
• View the code
• Author: Steven Roberts

The CSS chimera animation that features on 7UP is a beautiful example of conveying a brand theme through into the website pattern. The animation consists of a few elements: the SVG 'drawing' of the bubbles and so ii animations applied to each bubble.

The outset animation changes the opacity of the bubble and moves it vertically in the view box; the 2d creates the wobbling effect for added realism. The offsets are handled by targeting each bubble and applying a unlike blitheness duration and delay.

In order to create our bubbles we'll be using SVG. In our SVG we create two layers of bubbles: ane for the larger bubbles and i for the smaller bubbles. Inside the SVG we position all of our bubbles at the lesser of the view box.

          <m class="bubbles-big" stroke-width="7">   <1000 transform="translate(10 940)">   <circumvolve cx="35" cy="35" r="35"/>   </g>   ... </g> <g course="bubbles-pocket-size" stroke-width="4">   <yard transform="translate(147 984)">   <circle cx="15" cy="15" r="15"/>   </g> </g>   ... </thousand>        

In social club to utilize two separate animations to our SVGs, both utilising the transform property, we need to apply the animations to divide elements. The <yard> element in SVG can be used much like a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag.

          <g>   <g transform="translate(ten 940)">   <circumvolve cx="35" cy="35" r="35"/>   </g> </g>        

CSS has a powerful animation engine and really simple lawmaking in social club to produce circuitous animations. We'll beginning with moving the bubbles up the screen and changing their opacity in order to fade them in and out at the beginning and end of the animation.

          @keyframes upwardly {   0% {   opacity: 0;   }   10%, ninety% {   opacity: 1;   }   100% {   opacity: 0;   transform: translateY(-1024px);   } }                  

In order to create a wobbling result, we merely need to move (or interpret) the bubble left and right, by just the right amount – besides much volition crusade the blitheness to await too jaunting and disconnected, while too trivial volition become mostly unnoticed. Experimentation is key with when working with animation.

          @keyframes wobble {   33% {   transform: translateX(-50px);   }   66% {   transform: translateX(50px);   } }        

In order to apply the animation to our bubbles, we'll be using the groups nosotros used before and the help of nth-of-blazon to identify each bubble group individually. We start by applying an opacity value to the bubbles and the will-alter property in society to utilise hardware acceleration.

          .bubbling-big > thousand {   opacity: 0; will-change: transform, opacity;} .bubbles-large g:nth-of-type(1) {...} ... .bubbles-small grand:nth-of-blazon(10) {...}        

We want to keep all the animation times and delays within a couple of seconds of each other and set them to repeat infinitely. Lastly, we apply the ease-in-out timing function to our wobble animation to make it look a piffling more natural.

          .bubbles-big k:nth-of-blazon(1) {   blitheness: up six.5s infinite; } .bubbling-large thousand:nth-of-blazon(one) circle {   blitheness: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(ix) circumvolve {   animation: wobble 3s 275ms space ease-in-out; } .bubbles-minor g:nth-of-type(10) { animation: upwards 6s 900ms infinite;}        

• As seen on: Baltic Training
• View the code
• Writer: Steven Roberts

A subtle scrolling mouse animation can give management to the user when they first country on a website. Although this can be accomplished using HTML elements and properties, nosotros're going to use SVG as this is more suited to drawing.

Inside our SVG nosotros need a rectangle with rounded corners and a circle for the element we're going to animate, by using SVG we can scale the icon to any size we need.

          <svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid encounter">   <g fill up="none" fill-rule="evenodd">   <rect width="lxx" meridian="118" ten="one.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>   <circle cx="36.5" cy="31.five" r="4.5" fill up="#FFF"/>   </1000> </svg>        

At present nosotros've created our SVG, we demand to utilize some uncomplicated styles in order to control the size and position of the icon within our container. We've wrapped a link effectually the mouse SVG and positioned information technology to the bottom of the screen.

          .scroll-link {   position: absolute;   bottom: 1rem;   left: l%;   transform: translateX(-50%); } .mouse {   max-width: 2.5rem;   width: 100%;   elevation: auto; }        

Side by side we'll create our animation. At 0 and 20 per cent of the way through our blitheness, we want to set the state of our chemical element every bit it begins. By setting it to 20% of the fashion through, it will stay still for part of the time when repeated infinitely.

          @keyframes scroll {   0%, 20% {   transform: translateY(0) scaleY(1);   } }        

We demand to add in the opacity start point so transform both the Y position and the vertical scale at the 100% mark, the stop of our blitheness. The last thing we need to do is drop the opacity in order to fade out our circle.

          @keyframes roll {   ...   10% {   opacity: i;   }   100% {   transform: translateY(36px) scaleY(2);   opacity: 0.01;   } }        

Lastly we use the animation to the circumvolve, forth with the 'transform-origin' property and the will-change property to allow hardware acceleration. The blitheness properties are fairly self-explanatory. The cubic-bezier timing function is used to first pull the circle back earlier dropping it to the bottom of our mouse shape; this adds a playful feel to the blitheness.

          .scroll {   blitheness-name: scroll;   blitheness-elapsing: ane.5s;   animation-timing-office: cubic-bezier(0.650, -0.550, 0.250, 1.500);   animation-iteration-count: space;   transform-origin: 50% 20.5px;   volition-change: transform; }        

09. Animated writing

Click to see the animation in activeness

• As seen on: Garden Eight
• View the code for the paths and text
• Author: Steven Roberts

The Garden Viii website uses a common animation technique whereby text appears to be written out. To attain the issue, nosotros turn to SVG. To brainstorm with, we'll create the SVG. There are two approaches here: convert the text to paths in order to animate them or employ SVG text. Both approaches have their pros and cons.

Offset past creating our keyframe blitheness. The just role nosotros demand it to perform is to modify the stroke-dashoffset. Now nosotros've created our animation, we need to apply the values we want to animate from. We set the stroke-dasharray, which will create gaps in the stroke. We want to set our stroke to be a large enough value to cover the entire chemical element, finally offsetting the dash by the length of the stroke.

The magic happens when we apply our animation. By animating the offset, we're bringing the stroke into view – creating a drawing upshot. We want the elements to depict ane at a time, with some overlap between the cease of cartoon ane chemical element and beginning to depict the next. To achieve this we plow to Sass/SCSS and nth-of-blazon to delay each letter by half the length of the animation, multiplied by the position of that item letter.

x. Flying birds

• Every bit seen on: Fournier Père et Fils
• View the code for a single bird or the whole flock
• Writer: Steven Roberts

Nosotros start with completely straight vector lines, drawing each frame of our animation, depicting the bird in a dissimilar state of flight. We so manipulate the vector points and round the lines and edges. Finally, nosotros put each frame into an equally sized box and place them side-by-side. Consign the file as an SVG.

The HTML setup is actually simple. We just need to wrap each bird in a container in order to apply multiple animations – one to brand the bird fly and the other to movement information technology across the screen.

          <div form="bird-container">   <div form="bird"></div> </div>        

We apply our bird SVG as the background to our bird div and choose the size we want each frame to be. We use the width to roughly summate the new background position. The SVG has ten cells, and then nosotros multiply our width by 10 and then alter the number slightly until it looks correct.

          .bird {   background-image: url('bird.svg');   background-size: auto 100%;   width: 88px;   height: 125px;   volition-change: background-position; } @keyframes wing-bicycle {   100% {   background-position: -900px 0;   }  }        

CSS blitheness has a couple of tricks yous may not exist enlightened of. We can use the animation-timing-function to prove the image in steps – much similar flicking through pages in a notebook to allude to blitheness.

          animation-proper name: fly-cycle; blitheness-timing-part: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;        

Now nosotros've created our wing cycle, our bird is currently flapping her wings but isn't going anywhere. In order to move her across the screen, we create another keyframe blitheness. This animation will move the bird across the screen horizontally while likewise changing the vertical position and the scale to allow the bird to meander beyond more realistically.

Once we've created our animations, we simply demand to apply them. Nosotros can create multiple copies of our bird and apply unlike animation times and delays.

          .bird--1 {   animation-duration: 1s;   animation-delay: -0.5s; } .bird--ii {   animation-duration: 0.9s;   animation-filibuster: -0.75s; }        

11. Cross my hamburger

• Every bit seen on: Meliorate Brand Agency
• View the code for the spans and SVG
• Author: Steven Roberts

This animation is used all over the spider web, turning 3 lines into a cantankerous or close icon. Until adequately recently, the majority of implementations have been achieved using HTML elements, merely actually SVG is much more suited to this kind of blitheness – there's no longer a demand to bloat your buttons lawmaking with multiple spans.

Due to the animatable nature and SVG and its navigable DOM, the code to reach the animation or transition changes very little – the technique is the aforementioned.

We beginning by creating 4 elements, be it spans inside of a div or paths inside of an SVG. If we're using spans, we need to use CSS to position them inside the div; if we're using SVG, this is already taken care of. We want to position lines 2 and 3 in the centre – 1 on top of another – while spacing lines ane and 4 evenly above and below, making sure to heart the transform origin.

We're going to rely on transitioning two properties: opacity and rotation. First of all, we want to fade out lines one and iv, which we tin can target using the :nth-child selector.

          .bill of fare-icon.is-active {element-blazon}:nth-child(ane), .carte du jour-icon.is-active {element-type}:nth-child(4) {   opacity: 0; }        

The merely thing left to do is target the 2 heart lines and rotate them 45 degrees in opposite directions.

          .menu-icon.is-active {element-blazon}:nth-kid(2) {   transform: rotate(45deg); } .menu-icon.is-agile {element-blazon}:nth-kid(three) { transform: rotate(-45deg); }                  

12. Chasing circles

• Equally seen on: Improve Brand Agency
• View the lawmaking
• Writer: Steven Roberts

The blithe loading icon is made up of 4 circles. The circles have no fill, only take alternating stroke-colours.

          <svg grade="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">   <circle cx="170" cy="170" r="160" stroke="#E2007C"/>   <circle cx="170" cy="170" r="135" stroke="#404041"/>   <circle cx="170" cy="170" r="110" stroke="#E2007C"/>   <circle cx="170" cy="170" r="85" stroke="#404041"/> </svg>        

In our CSS, we can set some basic properties to all of our circles then utilise the :nth-of-blazon selector to utilize a different stroke-dasharray to each circle.

          circle:nth-of-type(1) {   stroke-dasharray: 550;  } circle:nth-of-blazon(2) {   stroke-dasharray: 500;  } circle:nth-of-type(3) {   stroke-dasharray: 450;} circle:nth-of-type(4) {   stroke-dasharray: 300;  }        

Side by side, nosotros need to create our keyframe animation. Our animation is actually simple: all we need to do is to rotate the circumvolve by 360 degrees. By placing our transformation at the fifty% mark of the animation, the circumvolve volition as well rotate back to its original position.

          @keyframes preloader {   50% {   transform: rotate(360deg);   }  }        

With our animation created, we now just need to apply it to our circles. We gear up the animation name; elapsing; iteration count and timing role. The 'ease-in-out' will give the animation a more playful feel.

          animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; blitheness-timing-part: ease-in-out;        

At the moment, we take our loader, but all of the elements are rotating together at the same fourth dimension. To fix this, we'll utilize some delays. Nosotros'll create our delays using a Sass for loop.

          @for $i from ane through 4 {   &:nth-of-type(#{$i}) {   animation-delay: #{$i * 0.15}s; } }        

Due to the delays, our circle at present animates in turn, creating the illusion of the circles chasing each other. The merely problem with this is that when the page showtime loads, the circles are static, then they start to move, one at a time. We can achieve the same offset effect, merely stop the unwanted pause in our animation by but setting the delays to a negative value.

          animation-delay: -#{$i * 0.15}due south;        

Adjacent page: More CSS blitheness examples to explore

portershight.blogspot.com

Source: https://www.creativebloq.com/inspiration/css-animation-examples

Share this post