CSS3 Animation: Heartbeat

CSS3 / keyframes / prefixfree

by secretgspot

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<img src="http://www.ucl.ac.uk/news/news-articles/1104/heart.jpg" >
<!-- NOTE! This example uses Lea Verous prefixfree javascript plugin, as I dont wanna bother with vendor prefixes http://leaverou.github.com/prefixfree/ -->

CSS

img {
    width:200px;
    height:200px;
    margin:40px auto;
    display:block;
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
    
    92% { transform: scale(1, 1);}
    94% {  transform: scale(1.2, 1.2); }
    96% {  transform: scale(1, 1); }
    98% {  transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1);}
}