2016-04-16

CSS3动画

Animation动画

简写方式为animation:liu 5s infinite linear 2s normal;

animation:animation-name animation-duration animation-timing-function animation-iteration-count animation-delay animation-direction;

animation-name动画属性名

animation-name属性为@keyframes动画规定名称。

@keframes动画关键帧

通过@keyframes规则，能够创建动画。创建动画的原理是将一套CSS样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套样式。

以百分比来规定改变发生的时间，或者通过关键词from和to，等价于0%和100%。

示例如下：

    @keyframes name{
            from{

            }
            to{

            }
    }

animation-duration动画持续时间

animation-duration属性定义动画完成一个周期所需要的时间，以秒计。默认为0，没有动画效果。

animation-timing-function动画效果

animation-timing-function规定动画的速度曲线。主要有：

linear 匀速
ease 先快后慢（默认属性）
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 先慢后快再慢
cubic-bezier(n,n,n,n)自定义函数，可能的值为0~1。

animation-iteration-count动画循环次数

animation-iteration-count指定元素播放动画循环次数。默认值1，播放一次。

animation-iteration-count:n | infinite;n指动画播放次数的数值；infinite指动画无限次播放。

animation-delay延迟

animation-delay指定元素动画开始时间，单位为s秒。默认值0。

animation-direction播放方向

animation-direction指定元素动画播放的方向。

animation-direction:normal | alternate;normal默认值，动画的每次循环都是向前播放；alternate动画播放第奇数次正常播放，第偶数次反方向播放。

animation-fill-mode

animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode:none | forwardsnone不改变默认行为；forwards当动画完成后，保持最后一个属性值。