CSS3动画

CSS3动画

　　通过 CSS3，我们能够轻松创建动画，能够精确控制该元素在动画期间的每一个状态，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

 

@keyframes 语法

定义动画，指定动画名称和动画效果。

@keyframes <identifier> { <keyframes-blocks> }

值	描述
identifier	必需。定义动画的名称。
keyframes-blocks	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同）to（与 100% 相同）
keyframes-blocks内容	必需。一个或多个合法的 CSS 样式属性。

 

示例1：定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

 

示例2：如果复杂的动画，可以混合去设置某个时间段内的任意时间点的样式

@keyframes testanimations{
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

 

animation 动画

　　当我们在 @keyframes 中创建动画以后，要把它捆绑到某个选择器，否则不会产生动画效果。捆绑的时候要用到css3新属性，animate规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称、规定动画的时长

div{
    animation: keyframesName 5s;
}

 

animation属性

属性	描述
animation	所有动画属性的简写属性，除了 animation-play-state 属性。 animation: name duration timing-function delay iteration-count direction fill-mode animation-play-state;
animation-name	规定@keyframes动画的名称。 animation-name: keyframename/none;
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-duration: time;
animation-timing-function	规定动画的速度曲线。默认是 "ease"。请参考动画函数--animation-timing-function
animation-delay	规定动画何时开始。默认是 0。animation-delay: time;
animation-iteration-count	规定动画被播放的次数。默认是 1 ,animation-iteration-count:n/infinite;
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。normal 默认值:动画应该正常播放。 alternate 动画应该轮流反向播放。
animation-fill-mode	规定对象动画时间之外的状态。默认值是none，不设置对象动画之外的状态
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"animation-play-state: paused/running;paused:规定动画已暂停。running:规定动画正在播放。

 

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值； http://cubic-bezier.com/ 这个网站可以帮助我们去定义动画，或者是打开控制台去调整

 

animation-iteration-count

检索或设置对象动画的循环次数

值	描述
infinite	无限循环。
number	指定对象动画的具体循环次数

 

animation-direction

检索或设置对象动画在循环中是否反向运动

值	描述
normal	正常方向
reverse	反方向运行
alternate	动画先正常运行再反方向运行，并持续交替运行
alternate-reverse	动画先反运行再正方向运行，并持续交替运行

 

animation-play-state

检索或设置对象动画的状态

值	描述
running	运动
paused	暂停

 

animation-fill-mode

检索或设置对象动画时间之外的状态

值	描述
none	默认值。不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态

 

定格动画(需要借助JS实现)

定义在动画结束的时候，我们做的工作。

值	描述
animationend	当animation 执行完成后js调用的事件
animationend	moz内核
webkitAnimationEnd	webkit内核
oAnimationEnd	opera内核
MSAnimationEnd	IE内核

值	描述
transitionend	当transition 执行完成后 js调用的事件
transitionend	moz内核
webkitTransitionEnd	webkit内核
oTransitionEnd	opera内核
MSTransitionEnd	IE内核

CSS Animation兼容性

  step-end、step-start

上图左边是不含 step-end 的，右边是含 step-end 的。

也就是说，step-end 会使 keyframes 动画到了定义的关键帧处直接突变，并没有变化的过程。

文中是 2s 的动画，在 50% 也就是 1s 时我们期望他的高度增长，不带 step-end 的就会有高度增长的过程，而带有 step-end 的就会在 1s 时突然变为关键帧定义的状态，没有变化过程。

step-start 同理，按本文例子来说，如果带上 step-start ，那么在 0% 刚开始的时候就已经变成了 50% 时的状态。

参考

• http://wanlimm.com/77201809146901.html