css3 动画

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

  

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

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

2、动画时长。

 css：

        .one{
            background:#f01238;
            width: 3px;
            height: 3px;
            border: 5px #f01238 solid;
            border-radius:50%;
            position: relative;
        }
 
        .one p, .one span{
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius:50%;
            animation: myfirst 1.5s  infinite;
            box-shadow: 0px 0px 1px #f01238; 
            margin: 0px;
        }
        .one  span{
            animation-delay: 0.7s;
        }

 
        @keyframes myfirst{
            10% {transform: scale(1);}
            100% {transform: scale(8);}
        }

 

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

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

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

其中动画时间百分比：

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

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

html：

<div style="margin-top: 20%;margin-left: 40%;" class="one"><p></p><span></span></div>

 

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

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