animation动画简介
1.animation是什么
2.animation怎么用
3.animation使用详解
animation是什么
animation中文的意思是“动画，动画模块，动漫，动画片”，就是表示这是用来制定动画的css属性。
Web动画的实现原理，是利用了人眼的“视觉暂留”现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在“动”。著作权归作者所有。
Web动画中有几个主要的概念：
- 帧：在动画过程中，每一幅静止画面即为一“帧”。
- 帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second)。
- 帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒)。
- 跳帧(掉帧/丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。
CSS Animation制作Web动画分为三部分：
- 声明动画：通过定制关键帧(@keyframes)来声明一个动画，这个关键相当于Flash动画、GIF动画图中的帧，主要用于控制CSS Animation效果
- 调用动画：在CSS中对应的元素上通过animation属性调用声明好的对应动画，并且指定动画播放的一些特性，比如播放时间、播放函数等
- 触发动画：最后一个环节是控制动画触发方式，就好比，我们视频做好了，默认有可能是播放的，也有可能是不播放的。在实际中我们要通过一定的触发方式来触发这些被引用的动画。
系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/animation/web-animation.html © w3cplus.com
css中的animation属性就是用来定义动画用的属性。
animation怎样使用
下边是使用使用animation的一个小例子：
<!DOCTYPE html>
<html>
<head>
<title>animation</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
position:relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果如图
通过上边的例子可以看出@keyframes用来定义动画，animation属性用来引用使用动画。
animation使用详解
animation包括以下几个属性：
| animation属性名 | 说明 | 值 |
|---|---|---|
| animation-name | 定义使用的动画名称，需要和@keyframes声明的动画 | keyframename|none(无动画效果) |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒 | time（秒[s]或毫秒[ms]计） |
| animation-timing-function | 动画的播放方式 | linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) |
| animation-delay | 指定元素动画开始播放的时间 | time（秒[s]或毫秒[ms]计） |
| animation-iteration-count | 指定元素播放动画的循环次数 | n|infinite |
| animation-direction | 规定动画是否在下一周期逆向地播放 | normal|alternate |
| animation-play-state | 用来控制元素动画的播放状态 | paused|running |
| animation-fill-mode | 动画结束之后，关键帧值是否保留在结束状态时的值 | none|forwards|backwards|both |
4008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
