画一颗跳动的心

引入图标库Font Awesome

<%- css('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css') %>

使用该图标库里的heart图标

<i class="fa fa-heart" aria-hidden="true"></i>

这是一个静态的图标，而且是灰色的，所以我们给这个图标加个ID

<i class="fa fa-heart" aria-hidden="true" id="myheart"></i>

给这个图标加上样式：

@keyframes heartAnimate{ 
    0%,100%{transform:scale(1);}                     /*0%,100%时保持图形的原大小*/
    10%,30%{transform: scale(0.9);}                 /*10%,30%时图形缩小成0.9倍*/
    20%,40%,60%,80%{transform:scale(1.1);}          /*20%,40%,60%,80%时图形扩大成1.1倍*/
    50%,70%{ transform:scale(1.1);}                 /*50%,70%时图形扩大成1.1倍*/
}
#myheart{
     color:red;                             /*心当然要是红色的啦*/
    animation: heartAnimate 1s infinite;       /*心当然要是跳动的啦*/
}

参考：
CSS3学习笔记（2）—左右跳动的红心
CSS3画一颗跳动的心
CSS3 animation属性
CSS3 transform属性

跳动的心脏主要就是使用了transform属性的scale属性值，用于设定对象进行2D缩放