CSS3 Animations实现桃心跳动画效果例子

CSS3 Animations怎么实现桃心跳动画效果？本篇文章小编给大家分享一下CSS3 Animations实现桃心跳动画效果例子，对此感兴趣的小伙伴们可以来看看。

css Animations 影响计算属性值，在animation执行过程中，属性的计算值被animation控制，它将覆盖原来定义的值。

如果对同一属性指定多个animation，最后定义的animation将覆盖前面的animation值。

在这些时候animation将不会影响属性计算值：在应用animation前、animation延时过期、animation结束。

Animations常用属性：

1、animation-name 动画名称

2、animation-duration 动画持续时间

3、animation-iteration-count 动画循环次数，默认1次，infinite无限次。

4、-webkit-animation-direction 动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

心跳动画效果

这里给大家分享实现桃心跳动动画效果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;

}