keyframes

与transition不同，这个可以在一开始就进行动画演示，无需操作，这在CSS动画中是很重要的部分，他可以让你任意调动，说白了，这个关键帧动画实际上就是多个补间动画,另外还有一种逐帧动画，它是一种特殊的关键帧动画，只不过他没有补间动画是一帧一帧的，但是他资源使用大，因此除了另两个动画搞不定的情况下尽量不要使用，因为他包含于keyframes里，因此说CSS设置动画实质上就两种transition和keyframes

<style>
    .container{
        width:50px;
        height:50px;
        background-color: red;
        animation: run 1s ;
    }
    @keyframes run{
        0%{
            width:100px;
        }
        10%{
            width: 20px;
        }
        50%{
            width: 200px;
        }
        100%{
            width:300px;
        }
    }
</style>
<body>
    <div class="container"></div>
</body>

栗子中的run是动画名要与下面的@keyframes后的对应好了

当然transition里可以用的这里也可以用，比如说可以加上像linear这样的

1	animation: run 1s linear ;

当只有前后两个节点时一般会写成from to来代替0% 100%

@keyframes run{
       from{
           width:100px;
       }
       to{
           width:300px;
       }
   }

还有一些有意思的animation属性

设置动画倒着开始

1	animation-direction: reverse;

设置动画不要回来了

1	animation-fill-mode: forwards;

设置动画循环次数，这里的infinite是无数次

1	animation-iteration-count: infinite;

设置动画停止

1	animation-play-state: paused;

逐帧动画

<style>
    .container{
        width:100px;
        height:100px;
        border: 1px solid red;
        background:url("http://images2015.cnblogs.com/blog/733006/201611/733006-20161103171828065-1874183143.png") no-repeat;
        animation: run 1s ;
        animation-timing-function: steps(1);
    }
    @keyframes run{
        0%{
            background-position:0px 0px;
        }
        50%{
            background-position:0px -80px;
        }
        100%{
            background-position:0px 0px;
        }
    }
</style>
<body>
    <div class="container"></div>
</body>

其实就是加个

1 2	animation-timing-function: steps(1); /* 只能是1 */