animation简介（初级）

来源：互联网发布：阿里云ecs推荐码编辑：程序博客网时间：2024/06/07 01:43

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

阅读全文

0 0