幾種常用的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);}
    }

 

未完.....