动画--过渡属性

div {
            width: 200px;        height: 200px;        background: red;        margin: 20px auto;       /* -webkit-transition-property: -webkit-border-radius;        transition-property: border-radius;*/        -webkit-transition-property: width;  /*过渡*/        transition-property: width;        -webkit-transition-duration:.5s;  /*完成过渡所需的时间*/        transition-duration:.5s;        -webkit-transition-timing-function: ease-in;  /*慢速开始的过渡*/        transition-timing-function: ease-in;        -webkit-transition-delay: .18s;   /*开始出现的延迟时间*/        transition-delay:.18s;    }    div:hover {
      transition: all .28s ease-in .1s;  /*从正方形的效果，慢慢过渡到圆角*/        width: 400px;    }

/*    transition-property:指定过渡或动态模拟的CSS属性    transition-duration:指定完成过渡所需的时间，设置过渡动画的持续时间    transition-timing-function:指定过渡函数    transition-delay:指定开始出现的延迟时间，指定一个动画开始执行的时间    /*transition-timing-function包括以下几种函数：    ease        默认值，速度由快到慢，逐渐变慢    linear      恒速    ease-in     渐加效果，加速速度越来越快    ease-out    渐隐效果，减速速度越来越慢    ease-in-out 先加速再减速*/

 

Keyframes被称为关键帧 以“@keyframes”开头

@keyframes changecolor{
     声明的动画可自己定义    0%{        background: red;    }    40% {
            background:orange;    100%{        background: green;    }    }

 

div{
    animation-iteration-count:infinite;  /*无限循环*/        animation-iteration-count:5; /*用来定义动画的播放次数*/        animation-name:move;   /*为 @keyframes 动画规定一个名称：*/        animation-direction:alternate;  /*设置动画的播放方向*/        animation-play-state:paused; /*页面加载时动画不播放*/    }

 

设置动画播放方向  animation-direction

其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

1 
     
      
     
 2  3                          div { 4                              width: 200px; 5                              height: 200px; 6                              border: 1px solid red; 7                              margin: 20px auto; 8                          } 9     span {10         display: inline-block;11         width: 20px;12         height: 20px;13         background: orange;14         transform: translateY(90px);15         animation-name: move;16         animation-duration: 10s;17         animation-timing-function: ease-in;18         animation-delay: .2s;19         animation-iteration-count:infinite;20         animation-direction:alternate;21     }22 23     @keyframes move {24         0%{25             transform: translateY(90px);26         }27         15%{28             transform: translate(90px,90px);29         }30         30%{31             transform: translate(180px,90px);32         }33         45%{34             transform: translate(90px,90px);35         }36         60%{37             transform: translate(90px,0);38         }39         75%{40             transform: translate(90px,90px);41         }42         90%{43             transform: translate(90px,180px);44         }45         100%{46             transform: translate(90px,90px);47         }48     }