18 top CSS animation examples

08. Falling snow

The snow is created using an SVG and the technique is very similar to the way we created the bubbles earlier. To start, we create two layers of circles inside an SVG, then we animate those two layers by translating the Y value with a keyframe animation. 

We apply the animation to each layer instead of individual elements and reuse the same animation for both layers. By simply giving them different durations, we can add some depth to our scene.

09. Moving background

The website A Violent Act uses masking and subtle movement to grab the attention of the user. The majority of the work here is in the setup and creating the SVG.

10. Colourful transitions

The DaInk website uses a really effective technique to transition between pages. The transition is simple and consists of an SVG containing a number of different-sized rectangles of different colours positioned on top of one another. 

The animation consists of transforming the X position by the width of the SVG. Then, using nth-of-type, we apply delays, offsetting each by 75ms from the last to create a smooth transition.

11. Randomly appearing letters

Jam3 used JavaScript and CSS to create an animated content overlay for a full-screen video background on its site Nuclear Dissent. 

To copy this CSS animation, the first step is to initiate the structure of the HTML document. This consists of the document container that stores the head and body sections. While the head section is used to load the external CSS and JavaScript resources, the body will contain the visible page content created in the next step.

The foreground page content is placed inside the main container to deliver the advantage of easy control of content flow. The text element has the overlay class applied so that it can be referenced by the JavaScript and CSS for applying the text animation. Multiple elements can have the animation applied by using the overlay class.

<main>
<h2 class="overlay">
  This is a story all about how...
</h2>
</main>

The final part of the HTML is to define the background video element. Not all browsers are able to support each video standard, hence the need to specify different sources. The browser will display the first source it is able to support. Take note of how the video element has the autoplay, muted and loop attributes applied so that it automatically plays and repeats without sound.

<video autoplay muted loop>
	<source src="http://techslides.com/ 
demos/sample-videos/small.webm" type="video/
webm" />
	<source src="http://techslides.com/
demos/sample-videos/small.mp4" type="video/
mp4" />
	<source src="http://techslides.com/
demos/sample-videos/small.ogv" type="video/
ogg" />
	<source src="http://techslides.com/
demos/sample-videos/small.3gp" type="video/3gp" 
/>
</video>

Create a new file called styles.css. The first step in this file is to define the properties of the main content container. Default settings for font and colour are applied for child content to inherit. Auto values are applied to the side margins so that child content appears centrally aligned.

main {
	font-family: Helvetica, sans-serif;
	color: #fff;
	padding: 2em;
	width: 75%;
	min-height: 100vh;
	margin: 0 auto 0 auto; }

The background element requires specific styling in order for the effect to work. Firstly, fixed positioning is important to guarantee that it stays in the same position if the user scrolls the page. Secondly, it must use a negative z-index that will guarantee its position underneath the main page content. Transform and size are also used to set the element’s size and location to cover the full-page window.

video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	z-index: -9999;
	transform: translateX(-50%) 
translateY(-50%);
	background: #000; }

The overlay element will be manipulated by JavaScript to split each letter of its text content to be wrapped by a span tag. This allows individual letters to be animated via CSS. Firstly, the default settings for the span letters are defined to have relative positioning, invisible opacity and an applied animateOverlay animation. Secondly, a delay to their animation is applied based on their child positioning.

.overlay span{
	position: relative;
	opacity: 0;
	top: 1em;
	animation: animateOverlay 1s ease-in-
out forwards;
}
.overlay span:nth-child(4n) { animation-delay: 
0s; }
.overlay span:nth-child(4n+1) { animation-
delay: 1s; }
.overlay span:nth-child(4n+3) { animation-
delay: 2s; }
.overlay span:nth-child(4n+2) { animation-
delay: 3s; }

The animation applied to each span element consists of just one frame that the elements will animate towards. This sets their opacity to become fully visible, along with their vertical positioning to animate towards their default text flow position. Take note of how step 6 sets each span element to be pushed down by 1em.

@keyframes animateOverlay {
  to {
opacity: 1;
top: 0;
} }

Create a new file called code.js. This first step will search for all of the elements using the overlay class – of which a for loop is used to apply the code later on. These elements are not available until after the page has loaded, so they need to be placed inside an event listener in the browser window that is triggered on its load completion.

indow.addEventListener("load", function(){
	var nodes = document.
querySelectorAll(".overlay");
	for(var i=0; i<nodes.length; i++){
	} 
});

Each element found here needs to have its HTML contents redefined so each letter is inside a span element. This is achieved by reading its plain text using innerText, and then using a second for loop to individually add each letter to the new version of the HTML – complete within its span tag. After each letter has been read, the parent node’s innerHTML is updated with the new HTML.

var words = nodes[i].innerText;
var html = "";
for(var i2=0; i2<words.length; i2++){
	if(words[i2] == " ")html += 
words[i2];
		else html += 
"<span>"+words[i2]+"</span>"
}
nodes[i].innerHTML = html;

12. Pulsing circles

The pulse animation used on the Peek-a-Beat website is simple yet effective and not difficult to reproduce. It consists of three circles inside an SVG – we simply animate their scale and opacity.

13. Expanding highlight

This is a very simple, yet really effective technique. The transition is accomplished using the ::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

When the element is interacted with, the width and height of the pseudo element are both transitioned to 105% of the parent’s size (the change is much more dramatic vertically), as well as transitioning the colour of the text. 

14. Elevated title

Ensemble Correspondances uses simple animation to convey movement in music. The design loosely represents sheet music. 

15. Spinning menu icon

The animated menu button is created using an SVG. The animation occurs when the user interacts with the menu button. Two transitions take place: the circular group around the menu spins 360 degrees and the menu icon in the centre changes colour. 

The most complicated part is the timing-function. Utilising cubic-bezier to gain complete control, we’re able to start the animation slowly, race through the middle part and slow it down again at the end.

16. Underline from the centre

CSS animations: underline from centre

Click to see the animation in action

The animation consists of positioning the ::after pseudo element to the bottom and then scaling it when the button is interacted with.

17. Expanding corners

The Princess Alexandra Auditorium website has a visual way to show the categories of its shows. Each of the show cards has a triangular corner set in a colour which represents the category and then, on hover, the name of the category is displayed. 

The effect is accomplished using the ::before and ::after pseudo elements, transitioning the size of the triangle and fading the name in when the element is interacted with.

18. Sliding arrow

The Greenwich Library has a really interesting transition on its buttons. When interacting with the button, two things happen: the text part of the button is covered and the arrow is then animated off the right-hand side of the button and back in from the left. 

The colour transition is accomplished with the transition property and the arrow using a simple keyframe animation. Both the transition and the animation use the same duration in order to synchronise the movements.

Much of this article originally appeared in issue 268 of Web Designer, the creative web design magazine. Subscribe to Web Designer here.

Read more: