一、 在日常中，有时候需要实现一个简单动画。比如说：上下浮动，以及点扩散效果等，这个时候需要使用css3的@keyframes 这个属性。

  

keyframes的使用需要捆绑一个选择器才能生效。否则不会生成动画效果。

在规定动画属性的时候，需要指定至少以下2个属性，才能绑定到选择器上。

1、动画名称 （在keyframes中需要调用这个名称。）

2、动画时长。

 css：

1         .one{ 2             background:#f01238; 3             width: 3px; 4             height: 3px; 5             border: 5px #f01238 solid; 6             border-radius:50%; 7             position: relative; 8         } 9  10         .one p, .one span{11             position: absolute;12             width: 3px;13             height: 3px;14             border-radius:50%;15             animation: myfirst 1.5s  infinite;16             box-shadow: 0px 0px 1px #f01238; 17             margin: 0px;18         }19         .one  span{20             animation-delay: 0.7s;21         }22 23  24         @keyframes myfirst{25             10% {transform: scale(1);}26             100% {transform: scale(8);}27         }

 

其中我们需要在定义动画的时候：animation: myfirst 1.5s infinite;

 然后在@keyframes  动画名称  即完成绑定。

而@keyframes在定义的时候需要指定相应的css 样式以及的动画时间百分比。

其中动画时间百分比：

1、关键字方式：from  动画开始，相当于0%，to 动画结束，相当于100%.

2、使用百分比：开始 0%   结束100% ，为了更好的浏览器兼容请使用百分比。

html：

1 
     
      
      
     

 

上面的散点的实现。其实是用三个圆点实现的，其中标签p 和span 实现扩散效果。为了体现不同时间出现不同的扩散效果，使用动画一个属性：

animation-delay: 0.7s;  动画执行时间。