css 波纹扩散_css小动画（大小变换 、水波纹、loading）

一、无限放大缩小

可以应用于跳动的气球等场景，效果如下:

html部分

css部分

@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/

0%{

transform: scale(1); /*开始为原始大小*/

}

25%{

transform: scale(1.1); /*放大1.1倍*/

}

50%{

transform: scale(1);

}

75%{

transform: scale(1.1);

}

}

.ballon{

width: 150px;

height: 200px;

background: url("images/balloon.png");

background-size: 150px 200px;

-webkit-animation-name: scaleDraw; /*关键帧名称*/

-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/

-webkit-animation-iteration-count: infinite; /*动画播放的次数*/

-webkit-animation-duration: 5s; /*动画所花费的时间*/

/*-webkit-ani