css3 动画

标签：nsf   scale   变化   ack   css   ini   方向   infinite   yellow   

<img src="" />

添加css

img{ width:400px;height:auto;    animation: heart 0.5s infinite;  }

/*animation:动画名称  消耗时间  运动曲线  开始时间  播放次数  是否添加反方向*/

1.变化大小

@keyframes heart{　　

　　0%{transform:scale(1);}

　　50%{transform:scale(1.2);}

　　100%{transform:scale(1);}

}

2.移动/颜色变化

@keyframes move{

　　from{left:0;background:red;}

　　to{left:1000px;background-color:yellow;}

}

3.旋转

@keyframes rotate{

　　from{transform:rotate(0deg);}

　　to{transform:rotate(360deg);}

}

css3 动画

标签：nsf   scale   变化   ack   css   ini   方向   infinite   yellow   

原文地址：https://www.cnblogs.com/Tianjieqiangzhelingfeng/p/11782360.html