Skip to main content

25 cool CSS animation examples to recreate

13. Glitch text

Glitchy effects are ideal for giving a website an anarchic or distressed look. You can use CSS keyframes to create this kind of animation. The process is similar to working with animation software, except that keyframes in CSS are written as percentages for the timeline of animation in the code. In this glitch text tutorial (opens in new tab), designer and developer Mark Shufflebottom walks through the process. You'll also use CSS Grid (opens in new tab) to position elements on the screen. 

14. Off the beaten path

  • Author: Adam Kuhn

SVG-related properties are becoming more and more usable within CSS. Two of the most uniquely capable animatable properties include paths: offset-path and clip-path. For instance, using offset-path we can define (and even hand draw) an SVG path and adjust our offset-distance (or in the case of legacy browsers, motion-offset) to allow our elements to move around our defined path.

Below, we’ll define an SVG path and tell our element to move from beginning to end.

animation:followPath 5s ease-in-out 
offset-path: path("M 40 0 C 75 170 160 140
  200 280 Q 220 400 340 400 Q 420 380 480 540");
motion-path: path(“M 40 0 C 75 170 160 140
  200 280 Q 220 400 340 400 Q 420 380 480 540”);
@keyframes followPath{
  from{ offset-distance:0%;
  to{ offset-distance:100%;

Keep in mind when drawing your path, it will fit itself within the SVG's viewbox, with all numerical values being translated to pixels. This can pose responsive challenges as offset-path animations do not accept relative units. 

The other really neat animatable path property is clip-path. What’s great about animating clip-path is the ability to smoothly transition the positioning of path points. For instance, we can transition clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) to clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); and smoothly transition a square into a triangle – a feat otherwise near impossible with CSS. 

Important note on animating clip-path: the number of points on the path must remain equal for both the beginning and ending shapes. For an easy way to visualise how clip-path will animate check out Bennett Feely’s Clippy (opens in new tab).

Check out this offset-path example Ghibli Slider:

And clip-path example First Light:

15. 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.

16. 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.

17. 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.

18. Randomly appearing letters

Jam3 (opens in new tab) 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.

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

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=" 
demos/sample-videos/small.webm" type="video/
webm" />
	<source src="
demos/sample-videos/small.mp4" type="video/
mp4" />
	<source src="
demos/sample-videos/small.ogv" type="video/
ogg" />
	<source src="
demos/sample-videos/small.3gp" type="video/3gp" 

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%) 
	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.
	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 += 
		else html += 
nodes[i].innerHTML = html;

19. 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.

20. 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. 

21. Elevated title

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

22. 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.

23. Underline from the centre

CSS animations: underline from centre

Click to see the animation in action
(opens in new tab)

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

24. 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.

25. 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.

Read more:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Donovan Hutchinson is a front end designer and developer who specialises in CSS animation, web design and development.