1、图片无限放大缩小，类似心跳
css如下
??@keyframes scaleDraw { ?/*定义关键帧、scaleDrew关键帧名称*/ ???????????0%{ ???????????????transform: scale(1); ?/*开始为原始大小*/ ???????????} ???????????25%{ ???????????????transform: scale(1.6); /*放大1.1倍*/ ???????????} ???????????50%{ ???????????????transform: scale(1); ???????????} ???????????75%{ ???????????????transform: scale(1.6); ???????????} ???????}元素css中写上
-webkit-animation: scaleDraw 5s ease-in-out infinite;
2、元素或者图片，类似波纹扩散动画无限循环
html部分 <div class="parent"> ????????<img src="...." alt=""> ????????<span></span> ????????<span></span> ????</div>
css部分 .parent{ ??????????position: relative; ??????????width: 200px; ??????????height: 200px; ??????} ??????.parent img{ ??????????width: 200px; ??????????height: 200px; ??????????z-index: 0; ??????} ???????@keyframes biging{ ???????????0%{ ???????????????transform: scale(1); ???????????????opacity: 0.5; ?????????????} ???????????50%{ ???????????????transform: scale(1.5); ?????????????????opacity: 0; ??/*圆形放大的同时，透明度逐渐减小为0*/ ???????????} ???????????100%{ ???????????????transform: scale(1); ???????????????opacity: 0.5; ???????????} ???????} ???????.parent span{ ???????????position: absolute; ???????????width: 100px; ???????????height: 100px; ???????????left: 0; ???????????bottom: 0; ???????????background: #fff; ???????????border-radius: 50%; ???????????-webkit-animation: biging 3s linear infinite; ???????????z-index: -1; ???????} ???????.parent span:nth-child(2){ ???????????-webkit-animation-delay: 2s; /*第二个span动画需要延迟2秒*/ ???????}3、制作动画相册
重叠的图片控制一张的透明度的无限循环变化
@keyframes picOpacit{ ???????????0%{ ???????????????opacity: 0; ???????????} ???????????50%{ ???????????????opacity: 1; ???????????} ???????????100%{ ???????????????opacity: 0; ???????????} ???????} ???????.pic2{ ???????????position: absolute; ???????????width: 100px; ???????????height: 100px; ???????????left: 0; ???????????top: 0; ???????????-webkit-animation: picOpacity 3s ease-in-out infinite; ???????}4、加载的旋转动画
/*加载中动画*/@keyframes rotate{ ???0%{ ???????transform:rotate(0deg); ???????-ms-transform:rotate(0deg); ????/* IE 9 */ ???????-moz-transform:rotate(0deg); ????/* Firefox */ ???????-webkit-transform:rotate(0deg); /* Safari oí Chrome */ ???????-o-transform:rotate(0deg); ???} ???100%{ ???????transform:rotate(360deg); ???????-ms-transform:rotate(360deg); ????/* IE 9 */ ???????-moz-transform:rotate(360deg); ????/* Firefox */ ???????-webkit-transform:rotate(360deg); /* Safari oí Chrome */ ???????-o-transform:rotate(360deg); ???}}.notLoad img{ ???position: relative; ???top: .05rem; ???margin-right: 3px; ???width: .32rem; ???height: .32rem; ???-webkit-animation: rotate 2s ease-in-out infinite;}css心跳动画
原文地址：https://www.cnblogs.com/gopark/p/9551462.html