Skip to content

Instantly share code, notes, and snippets.

@paceaux
Created May 10, 2012 19:09
Show Gist options
  • Save paceaux/2655180 to your computer and use it in GitHub Desktop.
Save paceaux/2655180 to your computer and use it in GitHub Desktop.
Beating heart with CSS3
.heart {
width: 20em;
height: 20em;
position: relative;
overflow: hidden;
}
.heart span {
display: block;
position: absolute;
width: 10em;
height: 16em;
background-color: #c50011;
-webkit-border-top-left-radius: 10em;
-webkit-border-top-right-radius: 10em;
-moz-border-radius-topleft: 10em;
-moz-border-radius-topright: 10em;
border-top-left-radius: 10em;
border-top-right-radius: 10em;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
.heart span.left {
-o-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
left: 2.85em;
bottom: 2.2em;
-webkit-border-bottom-right-radius: 10em;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 10em;
-moz-border-radius-bottomleft: 0;
border-bottom-right-radius: 10em;
border-bottom-left-radius: 0;
-webkit-animation-name: shadows-side;
}
.heart span.right {
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 10em;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 10em;
border-bottom-right-radius: 0;
border-bottom-left-radius: 10em;
left: 7.1em;
bottom: 2.2em;
-webkit-animation-name: shadows;
}
.heart {
-webkit-animation-name: beat;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
color:red;
}
#colophon {
color:#e1e1e1;
position:fixed;
bottom:5%;
right: 0;
}
#colophon a{
text-decoration: none;
color: inherit;
}
@-webkit-keyframes shadows {
from {
box-shadow: .4875em .1875em .1875em rgba(90, 90, 90, .5);
}
to {
box-shadow: .875em .3875em .4875em rgba(90, 90, 90, .35);
}
}
@-webkit-keyframes shadows-side {
from {
box-shadow: -.4875em .1875em .1875em rgba(90, 90, 90, .5);
}
to {
box-shadow: -.0875em .3875em .4875em rgba(90, 90, 90, .35);
}
}
@-webkit-keyframes beat {
from {
-webkit-transform:scale(.75);
}
to {
-webkit-transform: scale(1.5);
}
}
<div class="heart">
<span class="left"></span><br>
<span class="right"></span>
</div>
@paceaux
Copy link
Author

paceaux commented May 10, 2012

For details or whatnot on how to make a CSS3 animated beating heart, see my blog post: http://blog.frankmtaylor.com/2012/02/14/happy-valentines-day-with-a-css3-heart/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment