CSS 实现 —— 无限放大缩小，可以应用于跳动的气球等场景，效果如下

@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
 0%{
 transform: scale(1); /*开始为原始大小*/
 }
 25%{
 transform: scale(1.1); /*放大1.1倍*/
 }
 50%{
 transform: scale(1);
 }
75%{
 transform: scale(1.1);
 }
 }

.WarningShowArea{
width: 100%;
margin-left:5%;
margin-top:-50px;
float:left;
width: 100%;
 height: 100%;
-webkit-animation-name: scaleDraw; /*关键帧名称*/
 -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
 -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
-webkit-animation-duration: 5s; /*动画所花费的时间*/
}

 

https://blog.csdn.net/yujin0213/article/details/79262825

原地址