實現動畫效果，要用到css的 animation 屬性，具體寫法為：

animation：a1, a2 , a3 ;

a1為通過@keyframes 規則建立的動畫名稱，可自己定義

a2 為動畫時常 ，例如：1s   2s   可自行規定

a3 為css自帶的動畫效果，有如下幾個：

瞭解這些以後，開始模仿一個點的閃爍動畫：

在css檔案裡定義 .dynamic_plot  類：

-webkit-animation     -moz-animation     來相容瀏覽器

設定  -count  來規定播放次數，這裡為無限播放

.dynamic_plot {
    width: 35px;
    height: 35px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;  /*透明*/

    animation: warn 3s ease-in;
    -webkit-animation: warn 3s ease-in;
    -moz-animation: warn 3s ease-in;

/*規定動畫無限次播放*/
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    
    background-color: rgba(255,185,15，1);
}
 

可以看到，在aniamtion 裡，呼叫了warn方法，就要在@keyframes  裡定義warn方法：

@keyframes warn {
   
}

在warn方法裡

用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成，建議使用百分比，會更加詳細：

動態效果：

@keyframes warn {
    100% {
        transform: scale(1);
        -webkit-transform: scale(0.3);
        opacity: 1;
    }

    75% {
        transform: scale(1);
        -webkit-transform: scale(0.3);
        opacity: 0.8;
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(0.5);
        opacity: 0.6;
    }

    25% {
        transform: scale(1);
        -webkit-transform: scale(0.8);
        opacity: 0.4;
    }

    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.2;
    }
}

這裡添加了五次，可根據需求更改，效果為由大到小縮成一個點，點的大小在之前.dynamic_plot類裡定義， 通過修改warn裡各個百分比的效果，改變閃爍效果。