本文主要介绍逐帧动画的制作方法(逐帧动画的制作原理和方法)，下面一起看看逐帧动画的制作方法(逐帧动画的制作原理和方法)相关资讯。
我们也可以用最基础的css实现网页动画、flas、javascript的效果图。做一个简单的gif动画图，上图是效果图。
要用css3制作动画，你需要知道两个css属性。
一个是@keyframes，因为它限制了css样式和动画从当前样式到新样式的变化过程。当浏览器兼容时，您需要将前缀webkit、ms或moz添加到关键帧。
关键帧中有两个属性，从和到。from中的内容定义动画开始的状态，to记录动画结束的状态。@keyframes后跟动画的名称。此名称可以自定义。例如，如果我取gifname，当页面上的标签元素使用这个动画时，就需要这个名称。
@keyframes gifname{来自{background:红；}到{background:黄；} } @webkit关键帧gifname/* safari和chrome */{来自{background:红；}到{background:黄；}}from和to也可以用来表示动画过程。如果能使用百分比，可以更丰富地定义动画内容。
@ key frames gif name { 0% {background:红；} 25% {background:黄；} 50% {background:蓝；} 100% {background:绿；} } @webkit关键帧gifname/* safari和chrome */{ 0% {background:红；} 25% {background:黄；} 50% {background:蓝；} 100% {background:绿；}}比如我在在div元素上使用此动画。
div { animation: gif nam: gif name 5s；/* safari和chrom: gif nam:·吉夫纳姆；animationduration: 2s；animationtimingfunction:起步；animationd: 1s；animationiterationcount:无限；animationdirection:候补；动画名称:动画名称。
这里是引入@k:默认为 轻松 。
线性:线性过渡。相当于贝塞尔曲线(0.0，0.0，1.0，1.0)
轻松:平稳过渡。相当于贝塞尔曲线(0.25，0.1，0.25，1.0)
渐入:从慢到快。相当于贝塞尔曲线(0.42，0，1.0，1.0)
放松:从快到慢。相当于贝塞尔曲线(0，0，0.58，1.0)
渐入渐出:从慢到快，再到慢。相当于贝塞尔曲线(0.42，0，0.58，1.0)
三次贝塞尔曲线: ;在三次贝塞尔函数中自己的值。可能的值是从0到1的数值。
st:立即跳转到动画的每个结束帧的状态。
动画延迟:动画延迟时间
默认值为0。
动画迭代计数:动画循环的次数。
默认值为1。属性值infinite表示无数次。
animationdirection:动画是否在下一个循环中反向播放。
属性值
正常:正常方向
反向:向相反的方向跑
交替:动画先正常运行，然后反方向运行，继续交替运行。
交替反向:动画先反向运行，再正向运行，继续交替运行。
还有另外两个属性:
animationfillmod:设置动画播放后的效果。
重视:
non:初始风格，没有改变默认行为。(默认行为)
保持forwards:动画播放后的最后状态；
保持backwards:结束后的第一状态；
动画播放状态:检索或设置对象动画的状态。
属性值
animationplaystat: running |暂停；
running:运动
paus:被停职了。
animationplaystat:pause；当鼠标经过时，动画停止，当鼠标移开时，动画继续。
到目前为止，我们都已经学习了属性，并开始练习该部分:
首先，准备好我们需要的图片。我在这里用了九张图。
我把九张图片放在九个li/li标签里。所有li标签均附有ul标签。然后把ul放在一个div标签里，div设置为一个图片的大小，然后一帧一帧的移动ul元素实现动画。
最后的处理是隐藏div元素之外的部分。然后我就有了文章开头的图。
最重要的是，代码:
！语言= 恩 头元字符集=amputf8 meta name = 视口 内容= 宽度=设备宽度，初始比例= 1.0 meta httpequiv = xua兼容 内容= ie =边缘 全音阶的第七音tlecss动画/titl: 0；padding: 0；}李{ liststyl:无；marginright: 0；} # div { width : 100p x；height cho 39@ . com 100p x；bord: 1px固体# fffov:隐藏；margin: 100px 0 0 100px；} # box { width : 900 px；height cho 44@ . com 100p x；bord: 1px固体# fffov: visibl: r: my first 2s st: */mozanimation : my first 2s stepstart 1s无限；/* safari和chrom: */w: my first 2s st: */oanimation : my first 2s st: 98 px；height cho 57@ . com 100p x；bord: 1px solid # fff；}李img { width : 100%；height cho 60@ . com 100%；} @关键帧s my first { 0% { l: 0px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400 px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top : 0；} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} } @mozk: 0 px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400 px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top:0} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} } @webkit关键帧myfirst /* safari和chrom: 0px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400 px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top : 0；} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} } @o关键帧my first/* op: 0 px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top : 0；} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} }/style/head body div id = div ul id = 盒子 liimg src = 。/img/o1 . jpg //李liimg src = 。/img/o2 . jpg //李liimg src = 。/img/o3 . jpg //李liimg src = 。/img/o4 . jpg //李liimg src = 。/img/o5 . jpg //李liimg src = 。/img/o6 . jpg //李liimg src = 。/img/o7 . jpg //李liimg src = 。/img/o8 . jpg //李liimg src = 。/img/o9 . jpg //li /ul /div/body/html最后，动画不支持ie9及更早版本的ie浏览器。
了解更多逐帧动画的制作方法(逐帧动画的制作原理和方法)相关内容请关注本站点。