几种常用的css动画效果（持续更新）

//忽大忽小闪烁的动画
@keyframes scaleDraw {
                        0%{
                            transform: scale(1);
                        }
                        25%{
                            transform: scale(1.2);
                        }
                        50%{
                            transform: scale(1);
                        }
                        75%{
                            transform: scale(1.2);
                        }
                    }
                  .dot{
                      width:9px;
                      height: 9px;
                      display: inline-block;
                      border-radius: 25px;
                      background-color: #c43535;
                      -webkit-animation-name: scaleDraw; /*关键帧名称*/
                      -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
                      -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
                      -webkit-animation-duration: 3s; /*动画所花费的时间*/
                  }

//旋转动画
.turn{
      width:100px;
      height: 100px;
      background: aqua;
      animation:turn 1s linear infinite;      
      margin: 100px auto;
    }
    /* 
      turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放
     */
    @keyframes turn{
      0%{-webkit-transform:rotate(0deg);}
      25%{-webkit-transform:rotate(90deg);}
      50%{-webkit-transform:rotate(180deg);}
      75%{-webkit-transform:rotate(270deg);}
      100%{-webkit-transform:rotate(360deg);}
    }

 

未完.....