css3的动画实现

关键属性animation

其中包括：动画名称；时间；延迟时间；播放次数

关键帧

@keyframes 动画名称{
        0%{
        相关属性.....
    }
        20%{
        相关属性....
    }
    40%{
        相关属性...
}
    60%{
        相关属性....
}

    80%{
    相关属性...
}

    100%{
    相关属性....
}

}

1. animation-name 定义一个或者多个动画的名称
   eg:demo
2. animation-duration 动画执行的时间
   取值：
   0时，动画不执行
   time:正数（单位为s或者ms）
   
   1. animation-delay 动画执行的延迟时间
      取值：
      0时，不延迟。立即执行
      负数时：延迟时间之前的动画将会被截断
      整数时：按照设置的时间延迟
   2. animation-iteration-count 设置动画执行的次数
      取值：
      number:自定义动画执行的次数，设置值可为0或正整数
      infiniter:无线循环
   3. animation-timing-function 动画的运动方式
      ease;liear;ease-in;ease-out;ease-in-out
   4. animation-direction 指定对象动画运动的方向
      取值：
      Normal:正常方向
      reverse:反方向运动
      alternate:正反方向交替运动（奇正，偶返）
      alternate-reverse:与alternate正好相反
   5. anmation-fill-mode 设置对象动画时间之外的状态
      取值：
      name:默认值
      forword:保持动画结束时的状态
      backwards:保持动画开始的状态
      both:遵循forwords和backwords两种规则
   6. animation-play-state 设置对象动画的状态
      取值：
      running: 默认值；paused暂停运动

代码：

//复杂的写法
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

简单的写法

div
{
animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}