IMG-LOGO

Create Heart beating using CSS3 Animation

andy - 24 Mar, 2016 5636 Views 0 Comment

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.

Related Articles

How to draw a circle in CSS?

In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.