animation属性总结

CSS3 animation

CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,可以实现复杂的效果

animation实现动画效果主要由二个部分组成

  1. 通过类型Flash动画中的关键帧来声明一个动画
  2. animation属性中调用关键词声明的效果,从而实现一个更为复杂的动画效果

CSS3动画属性animation

  1. animation-name:主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes规则。CSS加载时应用animation-name指定的动画,从而执行动画
  2. animation-duration:主要用来设置动画播放所需时间,一般以秒为单位
  3. animation-timing-function:主要用来设置动画的播放方式
  4. animation-delay:主要用来指定动画开始时间
  5. animation-iteration-count:主要用来指定动画播放的循环次数
  6. animation-direction:主要用来指定动画的播放方向
  7. animation-play-state:主要用来控制动画的播放状态。
  8. animation-fill-mode:主要用来设置动画的时间外属性

多个动画属性用在一个元素上用逗号分隔开

animation:animation1 1s ease .5s backwards,animation2 2s ease 1s forwards;  

关键帧

CSS3中,把@keyframes称为关键帧

@keyframes name {
    0% {
        //styles
    }
    percentage {
        //styles
    }
    100% {
        //styles
    }
}

@keyframes中的关键帧并不一定要按照顺序来指定,其实可以以任何顺序来指定关键帧,因为动画中的关键帧顺序由百分比确定而不是声明的顺序

@keyframes bounce {
    0%,20%,50%,80%,100% {
        transform:translateY(0);
    }
    40% {
        transform:translateY(-30px);
    }
    60% {
        transform:translateY(-15px);
    }
}

调用@keyframes声明的动画

animiation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值

.demo {
    margin-left:100px;
    background:blue;
    animation:name .2s ease-in
}

重要子属性详解

  1. animation-iteration-count:主要用于定义动画播放多少次,其值通常为整数,但也可以使用带有小数的数字,其默认值为1,只播放一次,如果取值为infinite,动画将会无限次播放
  2. animation-direction:用来指定元素动画播放的方向,默认值为normal,每次循环都是向前播放,取值为alternate,动画播放为偶数次则向前播放,为奇数次则向后方向播放
  3. animation-play-state:主要用来控制元素动画的播放状态,其中running为默认值,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放
  4. animation-fill-mode:属性定义在动画开始之前和结束之后发生的操作,默认值为none,表示动画将按预期进行和结束,值为forwards时,动画在结束后继续应用最后关键帧的位置,值为backwards时,会在向元素应用动画样式时迅速应用动画的初始帧。当其取值为both时,元素动画同时具有forwardsbackwards效果