css3 动画

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

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

在规定动画属性的时候，需要指定至少以下2个属性，才能绑定到选择器上。
1、动画名称（在keyframes中需要调用这个名称。）

2、动画时长。

css：

 1         .one{
 2             background:#f01238;
 3              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              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 <div style="margin-top: 20%;margin-left: 40%;" class="one"><p></p><span></span></div>

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

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