css动画keyframes总结

一、定义一个动画

@keyframes mymove{
    from {
        background-color:red;
    }
    to {
        background-color:blue;
    }
}

二、动画绑定

div
{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

三、动画属性

1.animation是一个复合属性：

动画名、持续时间、速度曲线、延迟、次数、方向、暂停样式、暂停播放

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

2.各个属性对应的值：

animation-name: keyframename|none;

animation-duration: time;

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

animation-delay: time;

animation-iteration-count: value|infinite;

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

animation-play-state: paused|running;