<p class="heart">♥</p>
<h1>I love you more than CSS animations.<br> And I really love those.</h1>
<p class="fine-print">pulsing heart CSS animation made with <3 by <a href="http:/twitter.com/brnnbrn">@brnnbrn</a></p>
@keyframes beat {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.1);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.05);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
body {
background: #c0392b;
text-align: center;
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 4em;
overflow: hidden;
}
h1 {
line-height: 1.3;
margin-bottom: 2em;
}
p {
margin: 0;
}
a {
color: #333;
text-decoration: none;
text-shadow: none;
&:hover {color: lighten(#e74c3c, 10);}
}
.heart {
font-size: 100px;
text-align: center;
color: lighten(#e74c3c, 5);
animation: beat 1s infinite;
}
.fine-print {
font-size: 12px;
}
View Compiled
This Pen doesn't use any external CSS resources.