在animation的属性中，有个属性 animation-timing-function 一共具有如下这些值
CSS
贝塞尔缓动就是完成补间动画的，比如流畅的缩放、位置移动等动画。
但是逐帧动画没有补间效果的，它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧，而是每一帧都是关键帧，需要自己定义每一帧的状态。
比如像下面这样的图，就只能通过逐帧动画来实现运动效果↓
这几个属性值就是用来处理逐帧动画的：
CSS
steps(number,position) ，有两个参数。
number表示动画的段数。关键帧的数量=段数+1。
position这个比较难理解，有两个值：end和start。end是默认值。
先看一个效果。
两个小球，从0px运动到400px，分为了4个动画步骤，有5个关键帧。第一个是start模式，第二个是end模式。
发现start模式是时间一开始，直接进入第二个关键帧状态，然后顺利顺利走完全程。
end模式有点傻，时间一开始，从第一个关键帧开始跑，结果时间结束了，才走完第四个关键帧，没有完成全部路程就over了。
所以start和end的名字和它所表示的含义刚好相反。
比如执行次数或者填充模式。
为上面的小球加上infinite，可以看出start模式第二次开始的运动都是从第二个关键帧开始的。
加上forwards模式则变得不一样了，forwards是向前的单词意思，但是表示的则是保留动画最后的运动状态，意思和功能也是相反的。
第二个end模式的小球终于有机会走完全程了。
所以，当为end模式设置了forwards的时候要小心，因为它其实多走了一步。
1、这头熊的原始素材一共有8个步骤。
所以使用 steps(8,end) 是最好的方式，因为如果使用 steps(8,start) ，则第一帧不能执行，最后一帧会闪白，图片消失。
因为要一直运动，所以需要加上infinite，当执行完最后一张图的时候，再返回到第一张图，形成一个连贯的完步。
通过背景图片的 background-position 的改变，形成熊的运动。
CSS
可以打开codepen编辑器，把运动时间设置更大一点，可以看到慢动作，一帧一帧是如何显示的。
2、这个logo一共有24张图片
但是logo只运动一次，并且停在结束状态，根据end模式的特征，如果加上forwards的话，会多运动一步。
所以，这里是 steps(23,end) ，为什么是23步，而不是24步，因为forwards模式对它的影响。要想最后一步还要看到图片，那么背景图片的挪动就要少挪动一个图片的宽度。图片整个宽度4800px，每一张图200px的宽高。所以背景图片只需要往左边挪动-4600px即可。
CSS
通过上面的案例可以看出，对象的运动效果由逐帧绘制的图片的间距所影响。间距一样，则速度一样。利用steps不能去改变现成的图片帧与帧之间的速度。
但是利用 step-end 或者 step-start 却是可以的。
3、 step-end 的特别用处
其实 step-end 等价于 steps(1,end) ， step-start 等价于 steps(1,start) 。
只有一个步骤的逐帧动画，却可以利用好时间的改变和距离的改变做出速度不同的效果来。
熊从左边快速奔跑出来，一共跑了六步，一步比一步速度放慢。然后在原地踏步。
首先这是一个逐帧动画，但是要实现不同的速度，又没有办法改变原来素材图片与图片之间的距离，所以要使用另外的办法。
第一个完步时间间隔小，left的值间隔大，相当于速度快。背景图片往左移动一张，left的值往右改变一次，熊实现往前奔跑。
CSS
第二个完步的时间间隔稍微大点，left的间隔小了一点，速度变慢了一些。依次类推，速度逐渐放缓。第二个完步又从第一帧开始。
CSS
所以说利用step-end还是可以做出速度不一样的逐帧动画的。
在线制作雪碧图： https://www.toptal.com/developers/css/sprite-generator
有一个网站可以生成动画三个字flash动画在线生成器如果你喜欢FLASH动画制作，这是一款将（或动画）与多个FLASH动画（透明特效）组合成一个动态画面的生成器，并自动生成博客使用代码。对于不熟悉FLASH动画制作的朋友，它将帮助你轻松地制作精美...
www.feedwhy.com2022-03-11
有什么动画制作的网站？知乎
阅读:6253评论:2
海量的视频制作模板，涵盖品牌推广、电商促销、教育科普、生活节日等主题，选择使用、替换图文等设计元素便能快速生成啦。操作界面直白易懂，功能丰富，除了有模板，还有 场景、人物、素材、...
知乎2021-06-24
Flash动画在线生成器-狸窝
如何下载网页上的flash视频文件 上网的时候发现网上有好多有趣且精美的flash动画视频，有没有办法把网页上面的flash视频下载到电脑上呢？如何下载网页上的flash视频或flash游戏？有些flash提供
狸窝
其他人还搜了
一键生成动画视频
免费动画生成器软件
一键生成动画的app
自动生成动画的软件
地图轨迹动画怎么生成
根据文字生成动画软件
根据文字自动生成动画视频的软件
输入文字自动生成动画
抖音小说动漫制作_芝士回答
1、打开字说，在首页可通过语音识别、本地视频语音识别的功能，一键生成文字动画视频。2、如果系统转换出的文字有偶尔的不准确情况可以在“编辑”界面进行优化和细节排版。让文字动画变得更好看...
芝士回答2022-03-17
gif动图制作在线生成？芝士回答
2.调整图片大小，图片太大制作gif动画，生成会比较慢。3.先看一下这个GIF动画面板，速度，质量，上移，下移，添加帧，删除帧，生成动画等按钮 4.现在点击这个添加帧 5.就把左边的图片添加到GIF动画面板里了，这里是按比例缩小的预览图，生成时候还是...
芝士回答2022-03-12
秀展网-免费在线制作 MG 动画的平台（送3000个特别版）小众软件
3.实用的动画组件素材 内置海量的动画组件素材，生动有趣又实用，直接添加即可，轻松增加画面动感。4.炫酷的特效素材 几百个炫彩缤纷的特效素材，可自由配色、调节速度、调节线条粗细等，轻松...
小众软件2020-06-06
制作文字特效动画工具，如何打造炫酷文字动画，制作3D文字动画-狸窝
我们经常可以在网上看到一些炫酷的特效文字动画，或者在微信聊天中，有一些特别搞笑的特效文字动画，在微信斗图中，这种动画表情往往比普通的表情包更能令人忍俊不禁，那
狸窝
优一酷特效3D字体生成器使用方法-百度经验
介绍如何使用优一酷特效3d字体生成器一键在线生成特效3d字体图片和动画制作平面海报及片头动画。优一酷特效3D字体生成器使用方法,介绍如何使用优一酷特效3D字体生成器一键在线生成特效3D字体图片和动画制作平面海报及片头动画
百度经验2019-06-26
跃网动画软件3.1版，一键批量制作原创真人配音文字动画视频，单个视频最高收益400元
软件界面：跃网动画软件3.1版主要功能包含导入一段音频，就可以全自动批量制作一段横版的文字动画视频，支持一键添序言加片头与片尾，当人也可以添加自己制作好的片头片尾。而且还可以自动生成...
腾讯网2020-09-28
分享一个动画制作网站-腾讯云开发者社区-腾讯云
论如何制作一个网站（非静态） 在初三的寒假，我在各位大佬的帮助下，建立了一个静态的网站（www.gaoice.cf）（但没过几天因为开学面临这中考备考的任务，没时间管理），不过我并不知足，因. ...
腾讯云计算
相关搜索
在线生成动画代码
动画视频生成app
怎么生成自己的动画头像
动画自动生成软件
动画人物名字三个字
有什么软件拍照可以生成字的
国产动画我四个字
快速生成css3动画
sw2018装配图怎样生成爆炸动画
动画生成软件
11-20条
高逼格的文字动画生成器 Motion Factory 一键生成Type_手机搜狐网
高逼格的文字动画生成器 Motion Factory 一键生成Typer Buider 接下来讲解下 【Typer Buider】文字 生成器 安装和使用方法 先安装主程序再安装扩展包 注意版本要求：AE CC 2015.3或者更高版本均...
搜狐网2018-09-05
动画制作_网站关键字_绿色资源网
在这里制作live2d画面会更加便捷，提供很多快捷工具，让你轻松生成live2d图像。同时还支持骨骼绑定，让你可以 dazstudio给需要的用户朋友带来功能强大的动画制作软件，不仅具有丰富的功能更有...
绿色资源网2019-01-02
网站制作动画步骤-百度经验
在fireworks中，可以通过创建动画元件自动生成动画。在Fireworks中，可以通过创建动画元件自动生成动画。拜个元件储存在对应的一个状态中，当按顺序播放所有状态时，就形成了动画。利用动画元件可以制作出淡入、淡出、变大、变小、旋转等效果。...
百度经验2013-10-04
生成动画-羽兔网软件
欢迎来羽兔网了解生成动画相关的软件信息，羽兔网为您提供更多优质的教育信息和在线视频教程。
羽兔网
AE脚本-智能文字标题动画生成器 Smartext – Animated Text Tool-LookAE.com
可以直接生成一些文字标题动画，单仅支持英文输入，不支持中文汉字。带有智能工具的 3 种不同风格（简单、故障和手写）的文本动画 您可以从项目中的任何位置快速创建和编辑标题。az、0-9...
LookAE
【电脑】超酷超有趣！抖音很火的图片变成字符动画网页！支持_输出_软件
软件使用方法非常简单，在源 Gif 图像选择一张 Gif 动画图片，在输出目录选择你想要保存的目录。当然，你也可以在设置中设置更改高级选项功能。然后点击转换就可以生成你想要的字符效果了。参数...
搜狐网2022-02-07
3D角色与动画在线生成平台Mixamo：让技术与艺术更完美的融合-36氪
而3D角色在线生成平台Mixamo则可以帮开发商省去很多烦恼。基于Web的Mixamo平台，可以帮助开发人员更轻易的创建出3D人物动画。用户可以直接上传自己设计的3D人物或使用Mixamo提供的角色进行创作...
36氪2013-07-25
可以推荐一个可以免费制作GIF的软件或者网站吗？知乎
阅读:41w+评论:38
Ezgif是一个几乎涵盖gif相关操作的 在线工具网站，在这里可以通过上传图片、视频将它们转换成 gif动画，并且进行裁切、缩小、减少帧数等操作。使用条件限制： 文件格式为：MP4,WebM,AVI,MPEG,...
知乎2021-03-09
教你如何一键生成文字动画_财经头条
现在想介绍个很简单的制作打字效果软件：万彩微影！输入文字，一键生成那种一个字一个字显现的文字动画。还有配音功能，制作+配音轻松搞定 怎么制作呢？只需简单3步，就可以做出来了： 1.打开字...
新浪财经2021-03-24
gif动画生成器_SOOGIF
gif动画生成器是一款gif合成工具，这款工具支持gif编辑，gif合成，视频转gif，图片转gif，gif缩放，gif裁剪等功能。下面推荐的是SOOGIF动图制作工具，SOOGIF多图合成工具是一款可以在线将多张...
www.soogif.com
相关搜索
生成动画
动画生成软件
快速生成css3动画
3dmax生成动画
动画自动生成软件
html5动画生成工具
动画视频生成app
建筑生成动画
在线生成动画代码
动画自动生成
方法/步骤首先，先在<body></body>中加入门
然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景]
div{
margin:0
padding:0
}
.door{
width:450px
height:450px
position:relative
background:#a1a1a1
}
.door .leftDoor,.door .rightDoor{
position:absolute
width:224px
height:400px
top:57px
top:50px
background:#d1d1d1
}
.door .leftDoor{
left:0
border-right:1px solid #999
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1)
-webkit-animation:leftDoor 5s 1
-moz-animation:leftDoor 5s 1
-o-animation:leftDoor 5s 1
animation:leftDoor 5s 1
-webkit-transform-origin: 0% 40%
-moz-transform-origin: 0% 40%
-o-transform-origin: 0% 40%
transform-origin: 0% 40%
}
.door .rightDoor{
right:0
border-left:1px solid #999
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1)
-webkit-animation:rightDoor 5s 1
-moz-animation:rightDoor 5s 1
-o-animation:rightDoor 5s 1
animation:rightDoor 5s 1
-webkit-transform-origin: 100% 40%
-moz-transform-origin: 100% 40%
-o-transform-origin: 100% 40%
transform-origin: 100% 40%
}
先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg)
}
}
@-moz-keyframes leftDoor {
0%,100% {
-moz-transform-origin: 0% 40%
}
0{
-moz-transform:perspective(0) rotateY(0)
}
100% {
-moz-transform:perspective(600px) rotateY(70deg)
}
}
@-o-keyframes leftDoor {
0%,100% {
-o-transform-origin: 0% 40%
}
0{
-o-transform:perspective(0) rotateY(0)
}
100% {
-o-transform:perspective(600px) rotateY(70deg)
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(70deg)
}
}
然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(-70deg)
}
}
@-moz-keyframes rightDoor {
0%,100% {
-moz-transform-origin: 100% 40%
}
0{
-moz-transform:perspective(0) rotateY(0)
}
100% {
-moz-transform:perspective(600px) rotateY(-70deg)
}
}
@-o-keyframes rightDoor {
0%,100% {
-o-transform-origin: 100% 40%
}
0{
-o-transform:perspective(0) rotateY(0)
}
100% {
-o-transform:perspective(600px) rotateY(-70deg)
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(-70deg)
}
}
5
这里的动画主要用到的是rotate和perspective
6
如果想要动画点击后才开门，可以加入一个按钮，然后js控制
