css3中的动画处理

动画--过渡属性 

 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，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

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

                         div {
                             width: 200px;
                             height: 200px;
                             border: 1px solid red;
                             margin: 20px auto;
                         }
    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: orange;
        transform: translateY(90px);
        animation-name: move;
        animation-duration: 10s;
        animation-timing-function: ease-in;
        animation-delay: .2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
    }

    @keyframes move {
        0%{
            transform: translateY(90px);
        }
        15%{
            transform: translate(90px,90px);
        }
        30%{
            transform: translate(180px,90px);
        }
        45%{
            transform: translate(90px,90px);
        }
        60%{
            transform: translate(90px,0);
        }
        75%{
            transform: translate(90px,90px);
        }
        90%{
            transform: translate(90px,180px);
        }
        100%{
            transform: translate(90px,90px);
        }
    }