Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp
animating.png

Simple Material design CSS animation

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

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>

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,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(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.

6.png

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);
  }
}

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

Subscribe on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.