点赞的css3的动画效果

.icon-3{

margin-right: -22rpx;

margin-top:5rpx;

width: 60px; 

height: 100px;

background: url('https://file.40017.cn/wisdomtravel/icon/minip/dianpin/ani.png') no-repeat; //总共16张小图，每个图的大小是60*100 所以width: 60px;height: 100px;

background-position: 0 0;

transform: scale(.5);

}

.my-heart-animation{

animation:heart-animated 0.3s 1 steps(15); //这里的steps,15的值是总共16图-1=15,是步长，因为初始就是第一张，所以这里是15

animation-fill-mode: forwards; //动画完成后，保持最后一个属性值 ，backwards初始

transform: scale(.5);

}

@keyframes heart-animated {

0%{background-position: left;}

100%{background-position: right;}

}

   

 .my-heart{display: block;width:100px;height:100px;border:1px solid red;background: url("../images/web_heart_animation.png") no-repeat;
   background-position: left;}
.my-heart-animation{animation:heart-animated 0.8s 1 steps(28); -webkit-animation-fill-mode: forwards;}

@keyframes heart-animated {
   0%{background-position: left;}
   100%{background-position: right;}

}