下面展示的是图片自动循环缩放效果图，请朋友们注意关键帧 @keyframes ，看看“时间轴” 0%{ transform: scale(1); } 25%{ transform: scale(1.3); } 50%{ transform: scale(1); opacity: 0; } 75%{ transform: scale(1.2); } 100%{ transform: scale(1.6); } 中的各属性都是怎样设置的，当你看明白了这个，就知道逐帧动画是怎么回事了。
代码：
＜style type="text/css"＞
.ballon{ width: 400px; height: 200px;
border:10px yellow double;/*边框线的厚度、颜色及样式*/
border-radius: 65px;
/*边框线的圆角半径*/ background: url("http://www.oldkids.cn/upload/2018/11/03/blog_20181103204759
612.jpg"); background-size: 650px 250px;
-webkit-animation-name: 图片缩放; /*动画名称*/
-webkit-animation-timing-function: ease-in-out; /*速度曲线*/
-webkit-animation-iteration-count: infinite; /*循环播放*/
-webkit-animation-duration: 20s; /*动画用时（秒）*/ }
@keyframes 图片缩放 { /*关键帧 要绑定到选择器的动画名称*/
0%{ transform: scale(1); /*开始为原始大小*/ }
25%{ transform: scale(1.3); /*放大倍率*/ }
50%{ transform: scale(1); opacity: 0;/*透明度*/}
75%{ transform: scale(1.2); /*放大倍率*/}
100%{ transform: scale(1.6); /*放大倍率*/} }
＜/style＞
＜div class="图片缩放"＞
＜div class="ballon"＞＜span class="粉"＞海特行者欢迎你＜/span＞＜/div＞ ＜/div＞
代码解析：
已在代码中注释，故不再赘。
