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.
