Simple material design CSS animation

Published on September 1, 2021 Updated on June 13, 2024

Material design is one of the most popular design languages in the world. In this tutorial, we will learn how to make a simple CSS animation following material design animation guidelines. So, let’s get started!

Preparing the HTML

First, we have to prepare the HTML. Create an HTML file and put/or type the code below in that file.

<div id="main">
	<div id="element">+</div>
</div>

Ok, now that we prepared our HTML we’ll style the components.

Styling the HTML components

Here, we will style the components that we made.

Adding some padding and a background to the body

body {
	background: #eceff1;
	padding: 20px;
}

Styling the container

We’ll style the resizing container.

#main {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	height: 200px;
	width: 600px;
	background: rgba(255, 255, 255, 1);
	box-shadow:
		0 3px 1px -2px rgba(0, 0, 0, 0.2),
		0 2px 2px 0 rgba(0, 0, 0, 0.14),
		0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

Styling the button

Now that we have a container, we’ll style the button (FAB).

#element {
	position: absolute;
	bottom: 40px;
	right: 40px;
	display: flex;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-family: sans-serif;
	color: #fff;
	background: #c51162;
	border-radius: 50px;
	box-shadow:
		0 7px 8px -4px rgba(0, 0, 0, 0.2),
		0 12px 17px 2px rgba(0, 0, 0, 0.14),
		0 5px 22px 4px rgba(0, 0, 0, 0.12);
}
 
#element:after {
	content: '';
	border-radius: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, 1);
	z-index: 9;
}

This is what we get.

Animating !

Here’s the last step we’ll start animating!

Animating the container

We’ll add the resizing animation to the container.

#main {
	animation: mainanimation 4s ease infinite;
}
 
@keyframes mainanimation {
	0% {
		width: 300px;
		height: 400px;
	}
	25% {
		width: 400px;
		height: 200px;
	}
	50% {
		width: 700px;
		height: 600px;
	}
	75% {
		width: 400px;
		height: 600px;
		box-shadow:
			0 11px 15px -7px rgba(0, 0, 0, 0.2),
			0 24px 38px 3px rgba(0, 0, 0, 0.14),
			0 9px 46px 8px rgba(0, 0, 0, 0.12);
	}
	100% {
		width: 300px;
		height: 400px;
	}
}

Animating the button

We’ll add the ripple effect and clicking animation to the button.

#element {
	animation: fabanimation 1s ease infinite;
}
 
#element:after {
	animation: fabripple 1s infinite ease;
}
@keyframes fabripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}
	20% {
		transform: translate(-50%, -50%) scale(0.7);
		opacity: 0.8;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		background: rgba(255, 255, 255, 0);
	}
}
 
@keyframes fabanimation {
	0%,
	100% {
		box-shadow:
			0 0px 0px -4px rgba(0, 0, 0, 0.2),
			0 12px 17px 2px rgba(0, 0, 0, 0.14),
			0 5px 22px 4px rgba(0, 0, 0, 0.12);
	}
	50% {
		box-shadow:
			0 11px 15px -7px rgba(0, 0, 0, 0.2),
			0 24px 38px 3px rgba(0, 0, 0, 0.14),
			0 9px 46px 8px rgba(0, 0, 0, 0.12);
		transform: scale(0.9);
	}
}

And that’s it! We have successfully created a simple material design CSS animation.

Something wrong or just found a typo? Edit this page on GitHub and make a PR!

Comments