c3动画

1.动画的基本语法和参数

 1,过渡:transition:使元素指定属性从A状态过渡平滑过渡到B状态，而不是直接过去，

    2.语法:transition:all 1s ease 0s;

    第一个参数:需要过渡的属性 ,all(默认)所有属性都过渡   基本上所有属性都能过渡  不能过渡:float/渐变*/

    第二个参数:过渡时间 s

    第三个参数: 缓冲描述词,速率  ease:逐渐变慢  linear:匀速过渡  ease-in:先慢后快  ease-out:先快后慢    ease-in-out:先慢后快再慢

    第四个参数:延迟时间 0s就是不延迟

2.animation动画属性

语法：animation:box 3s infinite 0s;

定义动画：@keyframes 动画名称{

        from{

            A 状态

        }to{

            B 状态

        }

        /*0%~~100%*/

       0%{

        }

 

animation动画属性：

 1.animation-name:动画的名称

    2.animation-duration:动画持续时长

    3.animation-timing-function:定义动画的速率 ease -in - out - 贝塞尔曲线

    4.animation-delay:延迟时间

    5.animation-iteration-count:播放次数   infinite:无限次数

    6.animation-direction:动画播放方向

        nomal:一直向前播放,当到最后一帧会回到第一帧;

        reverse:跟normal方向相反

        alternate:往复播放

        alternate-reverse:跟alternate反向

    7.animation-fill-mode ： forwards：动画播放完毕回到第一帧的状态

       none:默认,不设置   both:动画播放完毕后会回到结束或开始状态,结束状态优先

       8.animation-play-state:控制动画播放   paused:暂停动画  running:启动继续播放

下面就写个小案例，来运用以上学来的属性