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 |