CSS中的过渡与动画

一些简单的动画效果，是可以用纯CSS做出来的。所谓动画，我认为就是交互嘛，让页面不是那么死板。

过渡就是让动画的效果不是那么的突兀，显得自然一些。

 

简单写一些过渡和动画的API。

过渡

transition-duration: 过渡的属性

transition-property:过渡的时间

transition-timing-function: 过渡的形式 （贝塞尔曲线   搜一下就知道啦 很理论的 没法说呀）

transition-delay:过渡延迟时间

简写形式 

transition：时间1 时间2 属性1，时间3 时间4 属性2..........    第一个时间是过渡的时间，第二个是过渡延迟时间

注意：可以写多个要过渡的属性。但在简写属性时，牵扯到时间问题，第一个时间是过渡时间，然后再是过渡延迟

动画

animation-name：关键帧的名字

animation-duration：动画时间

animation-delay：动画延迟（动画外）

animation-timing-function：动画形式

animation-iteration-count：动画执行次数（动画内）----重复的是关键帧

animation-direction：动画方向（改变的是关键帧和动画形式）

                                  reverse 动画就从关键帧的反方向开始动画，同时动画形式也会反过来

animation-fill-mode：控制元素再动画外（动画延迟是动画外）的状态

                                动画外就是指：再关键帧中from和to之外的状态

animation-play-state：定义动画执行或者暂停（paused  running）

@keyframes 关键帧名字{

   第一种形式：

       from{}

       to{}

    第二种形式：

    0%{}

    10%{}

      .......

     100%{}

}

其中from就是一个关键帧

注意：animation-timing-function作用于一个关键帧周期

@keyframes作用于一个动画周期，即keyframes就是整个动画周期