标签:
定格动画
用你的鼠标摸他,他就不可能不动!!
这就是定格动画,只播放关键帧。就像以前的老电影一样,只有一张张底片,然后灯光打在底片上,移动底片,动画的感觉就会出来。
别问我排版为什么这么丑
其中用到的关键词是steps()和精灵
比如:
element{
background: url() no-repeat; //the-source-of-picture
animation: spirit-animation 4s steps(9);
}
@keyframes{
from{
background-position: ;//the-start-of-picture
}
to{
background-position: ;//the-end-of-picture
}
}
这个动画会在4秒种播放第一个关键帧和后面的9个关键帧。
下面说一下关键帧。当你在玩LOL(league of legends)的时候,你电脑显卡配置又脱离了年代,你可能会抱怨说,他妈的在放幻灯片。这一张张的幻灯片就是关键帧了。当一定的时间内数量够大的时候,你就感觉不出是在放幻灯片(人眼中光停留的时间是xx秒,当下一个光在上一束停留时进入眼中,你就不会感觉到卡顿)。
我们平时用的animation默认是补间动画。
那问题来了,什么又是补间动画呢。这就得抱怨下取名词的专家了,一大堆简写的名词,完全抠不动。
补间动画,英文tween animation、shape animation,上一个画面平滑过渡到下一个画面,在其间我可以截任意时刻的画面。关键帧就办不到了,他只有设定的那么多画面。
那么精灵呢?
一个对象一组动作的集合。
that`s all.
标签:
原文地址:http://www.cnblogs.com/carryme15/p/5825716.html