<

 

　　动画--过渡属性

 

　　div {

 

　　width: 200px;

 

　　height: 200px;

 

　　background: red;

 

　　margin: 20px auto;

 

　　-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;

 

　　}

 

　　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;

 

　　animation-direction:alternate;

 

　　animation-play-state:paused;

 

　　}

 

　　设置动画播放方向  animation-direction

 

　　其主要有两个值：normal、alternate

 

　　1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

 

　　2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

 

　　1 <div><span></span></div>

 

　　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     }