css心跳动画

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;
}

原文地址：https://www.cnblogs.com/gopark/p/9551462.html