使用 CSS3 Animations 实现桃心跳动画效果

Question

CSS3 Animations 赋予了我们更多的创意动画技术，通过 CSS3 Animations 这个属性，我们可以实现一些很炫很酷的动画效果，这篇文章就给大家介绍使用 CSS3 Animations 实现一个关键帧实桃心跳动画效果。

Animations 常用属性

首先对于不熟悉CSS3 Animations的开发者，我们一起来看看 CSS3 Animations 的常用属性，熟悉的开发者就当时温习一下吧，也不是什么坏事。

• animation-name 动画名称
• animation-duration 动画持续时间
• animation-iteration-count 动画循环次数，默认 1 次，infinite 无限次。
• -webkit-animation-direction 动画播放的方向，两个值，默认为 normal，这个时候动画的每次循环都向前播放。另一个值是 alternate，则第偶数次向前播放，第奇数次向反方向播放。

注意：CSS3 Animations 动画不能兼容所有的浏览器，有些属性需要添加浏览器前缀才能生效。

心跳动画效果

这里给大家分享实现桃心跳动动画效果2个方法。

写法一

@keyframes pound {
    from { transform: none; }
    50% { transform: scale(1.4); }
    to { transform: none; }
}
.heart {
    /* ... */
    animation: pound .5s infinite;
}

这个方法可以精简的地方:from和属于同一个属性可以合并写法。

@keyframes pound {
    from, to { transform: none; }
    50% { transform: scale(1.4); }
}

写法一进一步简写:from和to也就是0%-100% 如果这两个值都没有定义，写法可以直接省略。

@keyframes pound {
    50% { transform: scale(1.4); }
}

写法二

使用到alternate，第偶数次向前播放，第奇数次向反方向播放。

@keyframes pound {
    to { transform: scale(1.4); }
}
.heart {
    /* ... */
    animation: pound .25s infinite alternate;
}

猛戳这里查看示例效果。