css3动画入门

在css3中可以创建动画效果，是页面的变化更连贯柔和。
在css3中@keyframes 规则用于创建动画。在@keyframes中规定动画开始到结束的样式。

创建@keyframes实例

（前缀 -webkid- 表示支持chrome和safari）
@-webkit-keyframes loading {
     
    from {
     opacity: 1;width:5px;height:20px;}
    to {
     opacity: 0.25;width:5px;height:20px;}
  }

将动画绑定到元素上

div {
     
  //时间默认是0
    -webkit-animation: loading 1.2s ;//loading是动画的名字。时间为动画执行时间
  }

动画的样式和次数没有限制，可以使用百分比来设置改变的时间，
from和to等于百分比的0和100%。

实例

@-webkit-keyframes loading {
     
    0% {
     opacity: 1;width:5px;height:20px;}
    50% {
     opacity: 0.5;width:5px;height:20px;}
    100%{
     opacity: 0.1;width:5px;height:20px;}
  }

@keyframes的每个属性也可以单独定义

animation-name:规定绑定的动画名称
animation-duration：规定动画完成一个周期 的时间
animation-delay:规定动画何时开始，默认0
animation-iteration-count：规定播放次数。默认1

完整示例：

<style>
    @-webkit-keyframes one{
     
        0%{
     background:blue;width:100px;height: 20px;}
        50% {
     background:red;width:150px;height: 20px;}
        100% {
     background:green;width:100px;height: 30px;}
    }
    #one{
     
        width: 100px;
        height: 20px;
        background-color: brown;
        -webkit-animation: one 1s ;
    }
</style>
<div id="one"></div>