呼吸（心跳）动效css案例

直接上代码（呼吸效果css案例）

// 心跳动画
.heartbeat {
	animation: heartbeat 1.2s linear 1s 2;
}
@keyframes heartbeat {
	0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
	14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

简单介绍下animation

animation: name duration timing-function delay iteration-count direction;

属性值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

scale()方法

scale() — 缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

总结

制作呼吸(心跳)动画主要有两个知识点：
（1）animation
（2）scale()方法
ps : 动画是个很好玩的东东，要多动手试一试才会有惊喜哦~

版权声明：本文为博主原创文章，未经博主允许不得转载。 呼吸动效原创链接