Published on: 24 March, 2016

Create Heart beating using CSS3 Animation

Tumblr Digg Google Plus

You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.

Below is the css style code required to create the heart shape with beating animation in CSS3.

.heart-shape {
	position: relative;
	width: 50px;
	-webkit-animation: heart-beats 3s infinite;
	animation: heart-beats 3s infinite;
}

.heart-shape:before,
.heart-shape:after {
   background: #fd3803;
   position: absolute;
   width: 22px;
   height: 35px;
   top: 0;
   left: 22px;
   content: '';
   border-radius: 50px 50px 0 0;
   transform: rotate(-45deg) translateZ(0);
   -webkit-transform: rotate(-45deg) translateZ(0);
   transform-origin: 0 100%;
   -webkit-transform-origin: 0 100%;
}

.heart-shape:after {
   left: 0;
   transform: rotate(45deg) translateZ(0);
   -webkit-transform: rotate(45deg) translateZ(0);
   transform-origin :100% 100%;
   -webkit-transform-origin: 100% 100%;
}


@keyframes heart-beats {
  0%   { transform: scale(1); background-color:black;}
  7%  { transform: scale(1.2); }
  12%  { transform: scale(1.1); }
  20%  { transform: scale(1.3); }
  60%  { transform: scale(1); }
  100% { transform: scale(0.99); }
}

@-webkit-keyframes heart-beats {
  0%  { -webkit-transform: scale(1); }
  7%  { -webkit-transform: scale(1.2); }
  12% { -webkit-transform: scale(1.1); }
  20% { -webkit-transform: scale(1.3); }
  60% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0.99); }
}

Here is the html code required to create the heart shape. Basically just a div tag with a heart-beat css class on it.

<div class="heart-shape"></div>	

Demo of Heart Beating using CSS3 Animation

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.