DEV Community

Cover image for Simple Material design CSS animation
Posandu
Posandu

Posted on • Originally published at tronic247.com

5 1

Simple Material design CSS animation

Do you have heard of material design? It’s the most popular design language 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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

YAY! we’ve created our animation. Here’s what we get.

You can find more like this at my website ;)
[www].tronic247.[com]

👋 Kindness is contagious

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Get started

Thank you!

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay