Cartoon Try Again Gif 360 by 450

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

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

What is CSS animation?

CSS animation is a method of animative certain HTML elements without having to utilise processor and retention-hungry JavaScript or Flash. There'south no limit to the number or frequency of CSS backdrop that can be changed. CSS animations are initiated past specifying keyframes for the animation: these keyframes incorporate the styles that the chemical element will have.

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

The best animations still have their roots in Disney's archetype 12 principles of animation – you lot'll meet several mentions of that throughout these CSS animation examples, and then it'due south worth checking out that commodity before you become started. You might also want to explore our roundup of great animated music videos for farther examples and inspiration.

The golden rule is that your CSS animations shouldn't exist overblown – fifty-fifty a small-scale movement tin can accept a large touch, and too much can be distracting and irritating for users. Hither 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 effectually. It could be useful when y'all want to draw attending to an element on your folio.

We need very trivial HTML for this effect:

          <div form="demo">   <div form="perspective-container">     <div grade="card"></div>   </div> </div>                  

First, we position the demo and set perspective for our 3D transform:

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

Then style the div nosotros desire to breathing:

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

Here nosotros set up a background, so we fix overflow to hidden so that nosotros can add a sheen effect afterwards. We also ready css variables, sheenX and sheenY.

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

          .card::after {   content: "";   position: absolute;   elevation: -400px;   correct: -400px;   lesser: -400px;   left: -400px;   groundwork: 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) 50%, rgba(255,255,255,0) lx%, rgba(255,255,255,0) 100%);   transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }                  

Here nosotros're making sure the pseudo-element is bigger than the container. This will give us something to slide around on top of the card using transform.

The transform property is making employ of those CSS variables nosotros prepare earlier. We will fix those with JavaScript. Let's fix up the JavaScript to first heed for mouse events:

document.onmousemove = handleMouseMove;

We at present need a handleMouseMove function to handle onmousemove:

          function handleMouseMove(result) {   const summit = window.innerHeight;   const width = window.innerWidth;   // Creates angles of (-20, -20) (left, bottom) and (twenty, 20) (correct, superlative)   const yAxisDegree = event.pageX / width * forty - 20;   const xAxisDegree = event.pageY / superlative * -i * 40 + 20;   target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;   // Ready the sheen position   setSheenPosition(outcome.pageX / width, consequence.pageY / width); }        

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

We next telephone call a role to set the pseudo-element's position:

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

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

We multiply this number by 800 as we want information technology to scale up to a maximum of 400px, which is how far nosotros prepare the sheen pseudo-element outside the carte.

Lastly we set these offset values to our CSS variable properties, and the browser's renderer does the residue.

We now have a menu that turns to face our mouse while the sheen effect moves in the reverse direction on top. This creates a nice, eye-catching effect.

02. The big reveal

• Writer: Adam Kuhn

Animated content reveal effects seem to be quite popular right now, and used properly they tin can capture user focus and engage your audience. You've seen this earlier: a block of colour grows from one side or some other horizontally or vertically, and so retreats to the opposing side, this time revealing some text or an prototype below. It'south a concept that might seem tricky but actually relies on just a few things.

Get-go, nosotros'll set up up our element positioning (download the total code hither) – ascertain it as relative (just static will neglect in this example). In text cases it'south best to allow automatic height and width, although a fleck of padding doesn't injure. We'll also define a transform origin, in the case of the parent chemical element we want to apply the starting position. Since we want the element hidden initially, we'll use a scale transform forth the appropriate axis to shrink information technology.

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

Notation, we've offset the parent and pseudo element's animations with a delay telling the box that hides our text to reveal it only later on the element itself has fully scaled into view. Check out the Codepen below.

03. Stagger on

• Writer: Adam Kuhn

Once you've begun to accumulate a decent library of various easing snippets, information technology'south time to look into other ways to enhance the depth of your animations, and one of the all-time means is to offset your blithe elements.

Information technology's all too mutual that a JavaScript trigger is gear up to initiate a bunch of animations based on scroll position, merely to find all items moving effectively in tandem. Fortunately CSS itself provides a simple property that can make (or break) your blithe feel: animation-delay.

Let'south say, for case, nosotros have a grid of images nosotros want to animate into frame when the user scrolls. At that place's a number of means we could trigger this, about likely adding classes to the elements as they enter the viewport. This tin be quite a heavy elevator on the browser, nevertheless, and can be avoided by simply adding a unmarried class to a container chemical element and defining animation delays on kid elements.

This is a particularly adept use example for preprocessors similar SCSS or LESS, which allow us to use a @for loop to iterate through each element.

          #parent{ .child{      animation: animationName ane.5s ease-in-out i forward; @for $i from 1 through 20{      &:nth-of-type(#{$i}){ animation-delay:#{$i/10}s;                  } }     } }        

Here you'll run across with SCSS nosotros are able to loop through each :nth-of-type selector, then apply an animation delay based on each child element's numerical value. In this case you'll annotation we divide upwards our timing to reduce each increment to a fraction of a second. While offsetting your blithe elements can lend emotion to your animation, too much delay can make it feel disjointed. Check out this CodePen below.

04. Squigglevision

• Writer: Adam Kuhn

SVG filters provide a great way to achieve a natural, mitt-drawn feel and escape some of the flat-feeling rendering constraints of CSS alone. Animating them can further enhance the upshot.

Instance in signal: Squigglevision. Aye, this isn't a technical term known to almost animators, but you've surely seen it employed in cartoons. The idea is that the edges of these animated elements are non but somewhat jagged and rough-hewn, but these rough edges quickly variate, frame by frame, making them feel as 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 prepare up our blitheness timeline, calling each filter in its own keyframe. Information technology's important to play with the timing durations as we anticipate the animation will feel 'jumpy' but don't desire information technology then tedious every bit to experience disjointed or so fast equally to feel crazy.

To that end, it's important to note that CSS lacks the ability to smoothly transition between SVG filters equally there is no way to access properties such equally turbulence and scale, and then these types of animations should always be expected to be choppy.

05. Tumbling lettering

• Every bit seen on: Game of the Yr
• Author: Leon dark-brown

Google'due south Game of the Year features a playful CSS animation on the homepage, with the title words tumbling and bumping into ane some other. Here's how it was done.

The showtime pace is to define the webpage document with HTML. It consists of the HTML document container, which stores a caput and body section. While the caput department is used to load the external CSS and JavaScript resources, the body is used to store the page content.

          <!DOCTYPE html> <html> <head> <title>Off Kilter Text Animation</title> <link rel="stylesheet" type="text/css" href="styles.css"/> <script src="code.js"></script> </head> <body>   <h1 class="animate backwards">The Animated Title</h1>   <h1 class="animate forrad">The Animated Title</h1>   <h1 class="animate mixed">The Animated Title </h1> </body> </html>        

The folio content consists of three h1 title tags that will show the different variations of the animation outcome. While whatever text can be inserted into these tags, their blitheness is defined by the names in the form attribute. The presentation and animation settings for these class names will be defined in the CSS afterward on.

Adjacent, create a new file called 'lawmaking.js'. Nosotros want to find all folio elements with the animate course and create an array list representing each word of the inner text. The initial animation filibuster is also defined in this step. Page content is non available until the folio has fully loaded, so this lawmaking is being placed within the window'southward load event listener.

The give-and-take content of the animation items needs to be independent within a bridge chemical element. To practise this, the existing HTML content is reset to blank, then a loop is used to make the word in the identified 'words' listing a span element. Additionally, an animationDelay style is practical – calculated in relation to the initial delay (specified below) and the word'due south index position.

          window.addEventListener("load", part(){ 	var delay = 2; 	var nodes = document.querySelectorAll (".animate"); 	for(var i=0; i<nodes.length; i++){ 		var words = nodes[i].innerText.divide(" "); 		nodes[i].innerHTML = ""; for(var i2=0; i2<words.length; i2++){ 			var detail = certificate.createElement("span"); 			item.innerText = words[i2]; 			var calc = (delay+((nodes.length + i2)/three)); 	detail.way.animationDelay = calc+"s"; 			nodes[i].appendChild(item); } 	} });        

Create a new file called styles.css. Now we'll set the presentation rules that volition exist office of every discussion chemical element in the animation, controlled past their span tag. Display equally block, combined with centred text alignment, will event in each word appearing on a separate line horizontally aligned to the center of its container. Relative positioning will be used to breathing in relation to its text-menstruation position.

          .breathing bridge{ 	display: block; 	position: relative; 	text-align: center; }        

Animation elements that have the backwards and forwards class take a specific animation applied to them. This step defines the blitheness to apply to span elements whose parent container has both the animate and backwards or forwards class.

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

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

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

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

The animations we've just created are made with an initial 'from' starting position, with no vertical position or rotation adjustment. The 'to' position is the final state of the blitheness, which sets the elements with an adjusted vertical position and rotation state. Slightly different ending settings are used for both animations to avert the text becoming unreadable due to overlap in mixed animations.

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

06. Flip book

• Author: Adam Kuhn

When animating with CSS sometimes a expressionless simple approach is necessary. And in that location are few simpler animation methods than the flip book. Using steps () every bit our timing function, we are able to replicate this effect. While this might sound choppy and straight contradict our mission to maintain fluidity, with the correct pacing it tin can feel only equally seamlessly organic.

So how does it piece of work? We define our animation easing role with just a few boosted parameters – telling our animation how many steps are needed and at which signal during the first step we'd similar to begin (outset, terminate) – looking a piddling like this, for case steps (ten, beginning).

Within our keyframes, nosotros tin can now designate an end point to our animation: for this example let'south assume our animation is 10 seconds long and nosotros're using x steps. In this instance, each step volition be one second long, immediately moving to the post-obit one-second frame with no transition between.

Again, this seems to fly in the face of fluidity, but here's where stepped animations can really shine. Nosotros tin can incrementally iterate through a sprite sheet and animate frame-by-frame merely like a flip book. Past defining frames of equal size only compiling them onto a unmarried horizontal (or vertical) prototype, we can prepare this image as an element background and ascertain a pixel or percent background position every bit an finish bespeak to our animation, assuasive a single step for each frame. The sprite sheet will then shift and populate the element frame by frame with a fresh background prototype based on its position.

Let'due south take a await at an example. In this case some sets of blithe legs appended to some text characters. First, we'll define our blitheness name, duration, step count, outset position and iteration count:

          blitheness:runner 0.75s steps(32, cease)  space;        

Again, note that the duration is relatively speedy at less than one total 2d for 32 total frames. Next, we'll ascertain our keyframes:

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

Note that the vertical positioning of the epitome is consistent throughout, which tells us that the sprites are horizontally stretched across the image, which is 1280px in total width. Every bit we've defined 32 total frames for that image, we tin can deduce that each frame should be 40px wide. Check out this Codepen below.

It'south important to note that a large sprite sheet can potentially exist a severe elevate on performance, and so be sure to size and compress images. With a well-crafted sprite canvas and an appropriate animation duration you at present have a smoothen animation able to convey circuitous motions.

07. Blowing bubbles

• Equally seen on: 7UP
• View the lawmaking
• Author: Steven Roberts

The CSS chimera blitheness that features on 7UP is a beautiful instance of carrying a brand theme through into the website pattern. The animation consists of a few elements: the SVG 'drawing' of the bubbling and and then two animations applied to each chimera.

The first animation changes the opacity of the chimera and moves it vertically in the view box; the second creates the wobbling consequence for added realism. The offsets are handled past targeting each chimera and applying a unlike blitheness duration and filibuster.

In order to create our bubbles we'll be using SVG. In our SVG we create 2 layers of bubbles: one for the larger bubbles and one for the smaller bubbling. Within the SVG we position all of our bubbles at the bottom of the view box.

          <thousand form="bubbles-large" stroke-width="vii">   <g transform="translate(10 940)">   <circumvolve cx="35" cy="35" r="35"/>   </g>   ... </g> <g class="bubbles-minor" stroke-width="4">   <one thousand transform="translate(147 984)">   <circle cx="xv" cy="15" r="15"/>   </1000> </thou>   ... </g>        

In order to utilise two divide animations to our SVGs, both utilising the transform property, we need to apply the animations to divide elements. The <g> element in SVG tin can be used much similar a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag.

          <g>   <one thousand transform="translate(x 940)">   <circle cx="35" cy="35" r="35"/>   </one thousand> </g>        

CSS has a powerful animation engine and really simple code in order to produce complex animations. We'll start with moving the bubbling up the screen and changing their opacity in order to fade them in and out at the beginning and terminate of the animation.

          @keyframes up {   0% {   opacity: 0;   }   ten%, 90% {   opacity: 1;   }   100% {   opacity: 0;   transform: translateY(-1024px);   } }                  

In lodge to create a wobbling effect, we just need to move (or translate) the chimera left and right, by merely the correct corporeality – too much will cause the animation to expect too jaunting and asunder, while also little will go mostly unnoticed. Experimentation is key with when working with animation.

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

In order to use the blitheness to our bubbles, nosotros'll be using the groups nosotros used earlier and the help of nth-of-type to identify each bubble grouping individually. We start by applying an opacity value to the bubbles and the will-alter holding in order to utilise hardware acceleration.

          .bubbles-large > one thousand {   opacity: 0; will-change: transform, opacity;} .bubbles-large m:nth-of-blazon(ane) {...} ... .bubbles-small thousand:nth-of-type(10) {...}        

We desire to keep all the animation times and delays inside a couple of seconds of each other and gear up them to repeat infinitely. Lastly, we utilize the ease-in-out timing role to our wobble blitheness to make information technology wait a piffling more natural.

          .bubbles-big m:nth-of-type(1) {   animation: up 6.5s space; } .bubbling-large one thousand:nth-of-type(one) circle {   blitheness: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle {   animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: upward 6s 900ms infinite;}        

• Equally seen on: Baltic Training
• View the lawmaking
• Author: Steven Roberts

A subtle scrolling mouse blitheness can requite management to the user when they first land on a website. Although this can be accomplished using HTML elements and properties, we're going to use SVG as this is more suited to cartoon.

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

          <svg form="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid encounter">   <k fill="none" make full-dominion="evenodd">   <rect width="70" peak="118" ten="1.five" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>   <circumvolve cx="36.5" cy="31.v" r="4.five" fill="#FFF"/>   </thousand> </svg>        

Now we've created our SVG, we demand to utilise some simple styles in lodge to command the size and position of the icon within our container. We've wrapped a link around the mouse SVG and positioned information technology to the bottom of the screen.

          .roll-link {   position: absolute;   bottom: 1rem;   left: 50%;   transform: translateX(-50%); } .mouse {   max-width: 2.5rem;   width: 100%;   height: car; }        

Adjacent nosotros'll create our animation. At 0 and 20 per cent of the way through our animation, nosotros want to set up the land of our element as it begins. By setting it to xx% of the way through, it will stay still for part of the time when repeated infinitely.

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

We need to add in the opacity starting time point and then transform both the Y position and the vertical scale at the 100% marker, the end of our animation. The last matter we need to do is drop the opacity in order to fade out our circle.

          @keyframes scroll {   ...   x% {   opacity: 1;   }   100% {   transform: translateY(36px) scaleY(2);   opacity: 0.01;   } }        

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

          .gyre {   blitheness-name: scroll;   blitheness-elapsing: one.5s;   animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, i.500);   animation-iteration-count: infinite;   transform-origin: 50% 20.5px;   volition-modify: transform; }        

09. Blithe writing

Click to see the blitheness in action

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

The Garden Eight website uses a common animation technique whereby text appears to be written out. To achieve the issue, we turn to SVG. To begin with, nosotros'll create the SVG. In that location are two approaches hither: convert the text to paths in gild to animate them or use SVG text. Both approaches have their pros and cons.

Beginning by creating our keyframe animation. The only office we demand it to perform is to alter the stroke-dashoffset. At present nosotros've created our animation, we demand to apply the values we want to breathing from. We set the stroke-dasharray, which will create gaps in the stroke. We desire to prepare our stroke to be a large enough value to embrace the unabridged chemical element, finally offsetting the nuance by the length of the stroke.

The magic happens when nosotros apply our animation. Past animative the offset, we're bringing the stroke into view – creating a drawing effect. We want the elements to draw i at a time, with some overlap between the end of cartoon one element and outset to draw the next. To accomplish this we plow to Sass/SCSS and nth-of-type to delay each letter by half the length of the animation, multiplied past the position of that particular alphabetic character.

ten. Flying birds

• As seen on: Fournier Père et Fils
• View the lawmaking for a single bird or the whole flock
• Author: Steven Roberts

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

The HTML setup is really simple. We just need to wrap each bird in a container in club to use multiple animations – one to make the bird fly and the other to motion it across the screen.

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

Nosotros use our bird SVG equally the groundwork to our bird div and choose the size we want each frame to be. Nosotros use the width to roughly calculate the new background position. The SVG has 10 cells, and so nosotros multiply our width by 10 and and so alter the number slightly until information technology looks right.

          .bird {   background-image: url('bird.svg');   background-size: machine 100%;   width: 88px;   height: 125px;   will-change: background-position; } @keyframes fly-bike {   100% {   background-position: -900px 0;   }  }        

CSS animation has a couple of tricks you may not be aware of. Nosotros tin can use the blitheness-timing-function to show the image in steps – much like flicking through pages in a notebook to insinuate to blitheness.

          blitheness-name: wing-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-elapsing: 1s; animation-filibuster: -0.5s;        

Now we've created our wing bike, our bird is currently flapping her wings but isn't going anywhere. In order to motion her across the screen, nosotros create some other keyframe animation. This animation will move the bird across the screen horizontally while besides changing the vertical position and the calibration to permit the bird to meander across more realistically.

Once nosotros've created our animations, we simply need to utilize them. We tin create multiple copies of our bird and use different animation times and delays.

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

eleven. Cantankerous my hamburger

• Equally seen on: Improve Brand Bureau
• View the lawmaking for the spans and SVG
• Author: Steven Roberts

This animation is used all over the web, turning three lines into a cross or close icon. Until fairly recently, the bulk of implementations have been achieved using HTML elements, just actually SVG is much more than suited to this kind of blitheness – there's no longer a need to bloat your buttons lawmaking with multiple spans.

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

We start by creating four elements, be it spans inside of a div or paths inside of an SVG. If nosotros're using spans, we demand to use CSS to position them inside the div; if nosotros're using SVG, this is already taken intendance of. We want to position lines 2 and 3 in the middle – ane on height of another – while spacing lines one and four evenly in a higher place and beneath, making sure to centre the transform origin.

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

          .menu-icon.is-active {element-type}:nth-child(1), .menu-icon.is-active {chemical element-type}:nth-child(4) {   opacity: 0; }        

The only thing left to do is target the 2 middle lines and rotate them 45 degrees in reverse directions.

          .menu-icon.is-active {element-type}:nth-child(2) {   transform: rotate(45deg); } .menu-icon.is-agile {element-type}:nth-child(3) { transform: rotate(-45deg); }                  

12. Chasing circles

• As seen on: Meliorate Brand Bureau
• View the code
• Author: Steven Roberts

The animated loading icon is made up of four circles. The circles accept no fill, just take alternating stroke-colours.

          <svg course="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"/>   <circumvolve cx="170" cy="170" r="85" stroke="#404041"/> </svg>        

In our CSS, we can set some basic backdrop to all of our circles and so use the :nth-of-type selector to utilise a different stroke-dasharray to each circle.

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

Side by side, we need to create our keyframe blitheness. Our animation is really simple: all we need to do is to rotate the circle by 360 degrees. By placing our transformation at the 50% marker of the blitheness, the circle will also rotate dorsum to its original position.

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

With our animation created, nosotros now merely need to apply it to our circles. Nosotros gear up the animation proper noun; elapsing; iteration count and timing part. The 'ease-in-out' will requite the animation a more playful feel.

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

At the moment, we have our loader, but all of the elements are rotating together at the same time. To fix this, nosotros'll apply some delays. We'll create our delays using a Sass for loop.

          @for $i from one through 4 {   &:nth-of-blazon(#{$i}) {   blitheness-delay: #{$i * 0.15}s; } }        

Due to the delays, our circumvolve now animates in turn, creating the illusion of the circles chasing each other. The only problem with this is that when the page first loads, the circles are static, then they start to motility, i at a time. We can reach the aforementioned outset consequence, but stop the unwanted pause in our animation past simply setting the delays to a negative value.

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

Side by side page: More than CSS animation examples to explore

roefolook.blogspot.com

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

Share this post