使用關鍵幀聲明動畫

@keframes

單位只能是百分比 。0%

@keyframes AnimaName{
    from{

    }
    percentage{

    }
    to{

    }
}

@keyframes AnimaName{
    0%{

    }
    percentage{

    }
    100%{

    }
}

或應用如下方式設置動畫

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform: translateY(0);
    }
    40%{
        transform
 
: translate(-30px);
    }
    60%{
        transform: translate(-15px);
    }
}

通過animation屬性來調用動畫

.test{
  animation: bounce .2s ease-in;
}

屬性詳解

animation-name 動畫名@keyframes後面的自定義名字，可以用none來覆蓋任何動畫

animation-duration 動畫播放時間

animation-tining-function 動畫播放方式

animation-delay 動畫延遲播放的時間

animation-iteration-count 動畫播放的次數

animation-direction 動畫播放的方向 alternate 偶數次向前播放，奇數次反向播放 默認值normal向前播放

animation-play-state 動畫播放狀態 pause | running

animation-fill-mode 動畫時間外屬性

none 完成最後一幀時回到初始幀處

forwards 動畫應用結束後繼續應用最後關鍵幀的位置

backwards 向元素應用動畫樣式時迅速應用動畫的初始幀

both 同時具有以上兩個效果

CSS3學習筆記-動畫