Making a heart pulsate with CSS - html

Question

I have made a heart using CSS. I was just looking for a way to make it beat / pulsate.
Here is the code (fiddle):
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
-webkit-animation: heart 1s linear infinite;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart"></div>

Answer 1

What a lovely post to begin the evening with.
Sure, this is possible with pure CSS - you are likely interested in animations:
CSS
#heart-container {
width: 100px;
height: 90px;
animation: pulsate 0.5s infinite;
}
#keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Working example on JSFiddle.
Just wrap your lovely heart in #heart-container, and you are good to go. Also, don't forget to include the vendor specific prefixes where necessary.
FYI, the animation shorthand property - similar to transition - also accepts an easing setting (timing-function), like ease-in-out. Or, use animation-timing-function.
See the animation easing example on JSFiddle.
Note
For anyone wondering why I suggested this approach instead of an alternating animation, this approach synergizes with easing functions pretty well.

Answer 2

The animation property is your friend. :)
#heart {
position: relative;
width: 100px;
height: 90px;
-webkit-animation: heartbeat .8s ease-in-out 0s infinite;
-moz-animation: heartbeat .8s ease-in-out 0s infinite;
animation: heartbeat .8s ease-in-out 0s infinite;
transform: scale(1);
}
#-moz-keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#-webkit-keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id = "heart"></div>

Answer 3

Create a beating heart icon using font-awesome, JQuery and CSS animations.
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale(.75);
}
100%
{
transform: scale( 1 );
}
}
create beating heart