CSS动画效果animation

Posted 2020-06-28

/* 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;}          
  

}