码迷,mamicode.com
首页 > Web开发 > 详细

CSS动画效果animation

时间:2016-03-23 22:08:09      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

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

}
    
        
        

 

CSS动画效果animation

标签:

原文地址:http://www.cnblogs.com/webday/p/5313126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!