css3动画

什么是css3动画

可以通过每一帧来精选动画效果的展示，并且可以完美调用每一帧，常用来实现复杂的动画效果，可以在许多网页中取代动画图片，flash动画以及JavaScript。

使用css3动画的步骤

1.定义关键帧
2.调用关键帧
定义关键帧

    <style>
div{
    width: 300px;
    height: 300px;
    background-color: red;
}
    @keyframes stem{
    0%{
    background-color: red;

    }
    100%{
        background-color: yellow;

    }
    }

    </style>

@keyframes stem{
from{
}
to{
}
}

调用关键帧的animation动画属性
1.animation-name:规定@keyframes 动画的名称
2.animation-duration:规定动画完成一个周期所花费的秒或毫秒，默认是0
3.animation-timing-function: 规定动画的速度曲线,ease:ease-in;ease-in=out;linear;
cubic-bezier,steps()
4…animation-delay:规定动画何时开始，默认是0
5。animation-iteration-count； 规定动画播放的次数，默认是1，无数次：infinite
6.复合属性：animation：关键字名 持续时间 速度曲线 延迟时间 播放次数