css3------动画animation

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
/*animationName：动画名称；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。*/

animation有八个属性
animation-name 动画名称

animation-duration 动画的持续时间

animation-timing-function 对象动画的过渡类型
取值
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay 对象动画延迟的时间

animation-iteration-count 对象动画的循环次数
取值
infinite：无限循环
数字：指定对象动画的具体循环次数

animation-direction 循环中是否反向运动
取值
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state 动画的状态
取值
running：运动
paused：暂停

animation-fill-mode 动画时间之外的状态
取值
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

举个例子
效果就是盒子按四个角度移动，最后回到起点

 div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: sun 20s linear 1s infinite alternate;/*这里写的就是animation的属性值*/
    /*也可以写成这样这几个都是常用的*/
    animation-name:sun;    
    animation-duration:20s;    
    animation-timing-function:linear;    
    animation-delay:1s;    
   	animation-iteration-count:infinite;    
    animation-direction:alternate;
}
@keyframes sun{
/*这个里面可以只写0%||100% 还可以写成from||to这两个就代表0和100还可以写成下面这些*/
  0%{
    margin-left: 0px;
    margin-top: 0px;
    background-color: salmon;
}
  25%{
    margin-left: 500px;
    margin-top: 0px;
    background-color: chartreuse;
 }
   50%{
     margin-left: 500px;
     margin-top: 500px;
     background-color: khaki; 
                
}
  75%{
    margin-left: 0px;
    margin-top:500px;
    background-color: turquoise;
}
 100%{
   margin-left: 0px;
   margin-top: 0px;
   background-color: salmon;
}
}