CSS-简单动画效果

简单的图标扩散动画，重点备注

效果为一个心脏跳动

Body：

 

<div id="img_head_back">

<img src="img/邮箱(1).png" class="img_head_back_1" >

</div>

 

Css：

.img_head_back_1{

margin: auto;  

position: absolute;  

top: 0;

left: 0;

bottom: 0;

right: 0;  

animation-name: back;/* 为动画设置名称 */

animation-duration: 3s;/* 动画时长 */

animation-delay: 0s;/* 动画等待1s后开始 */

animation-iteration-count: infinite;/* 动画无限重复 */

}

//间隔1.5秒一次动画效果

@keyframes back{

0% {

width:180px;

height: 180px;

opacity:1.0;

}

50%{

width:180px;

height: 180px;

opacity:1.0;

}

100%{

width:220px;

height:220px;

opacity:0;

}

}