CSS 动画 实现点的动态缩放闪烁

实现动画效果，要用到css的 animation 属性，具体写法为：

animation：a1, a2 , a3 ;

a1为通过@keyframes 规则创建的动画名称，可自己定义

a2 为动画时常 ，例如：1s   2s   可自行规定

a3 为css自带的动画效果，有如下几个：

linear	以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

了解这些以后，开始模仿一个点的闪烁动画：

在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里各个百分比的效果，改变闪烁效果。