CSS动画效果animation

/* CSS Document */

body{
     margin:400px

}

div{
    width:400px;
    height:400px;
    background-color:yellow;
    border:2px solid red;
    font-size:50px;
    animation-name:sky;
    animation-duration:4s;
    animation-timing-function:ease-in;
        animation-delay:0.5s;              /*延迟时间*/
       animation-iteration-count:2;      /*循环次数 iteration反复 infinite表示循环次数无限*/
        animation-direction:alternate;      /*缓动方向交替播放，快慢→慢快* normal默认值*/
        animation-play-state:paused;       /*停止播放,要动态的运用*/

    animation-fill-mode:backforwards;
    animation-fill-mode:forwards;
        animation-fill-mode:both;       /*根据情况产生backforwards或者forwards的效果，需要和iteration配合使用*/

    animation:sky 1s ease 2 alternate 1s both;
    /* 【简写】名称/秒数/缓动/循环次数/缓动方向/延迟/结束状态*/

}    

@keyframes sky{

  0%,100%{background-color:orange;
          margin:0px;
          color:#99FF66;}

      10%{background-color:#FF0000;
          margin:230px;}
      20%{background-color:#00FF00;}
      30%{background-color:#336600;}
      40%{background-color:#66FFFF;
          margin:140px;}
      50%{background-color:#FF6633;}
      60%{background-color:#CCCC99;}
      70%{background-color:#993366;}
      80%{background-color:#996699;}
      90%{background-color:#CC99FF;}

  form{background-color:orange;
          margin:0px;
          color:white;}

      to{background-color:#FF0000;
          margin:200px;}
  

}