html动画人物走路,CSS3动画中的steps(),制作人物行走动画

steps()是css3动画属性animation-timing-function的其中一个值，语法为：

steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

于是制作人物行走的动画有以下两种写法：

.animate {

width: 88.83333333333333px;

height: 54px;

margin: 10px auto;

overflow: hidden;

}

.animate img{

width: 533px;

height: 54px;

}

/**第一种和写法，动画分为6个阶段，每个阶段之前1步切换**/

.animate01 img{

-webkit-animation: animate01 1s steps(1) infinite;

}

@-webkit-keyframes animate01 {

0% {

transform: translateX(0);

}

16.7% {

transform: translateX(-90px);

}

33.4% {

transform: translateX(-180px);

}

50.1% {

transform: translateX(-270px);

}

67.8% {

transform: translateX(-360px);

}

84.5% {

transform: translateX(-450px);

}

100% {

transform: translateX(-533px);

}

/**第二种和写法，动画仅有1个阶段，但需要切换6步来完成，也就是说把每个阶段的计算过程交给css去做**/

.animate02 img{

-webkit-animation: animate02 1s steps(6, end) infinite;

}

@-webkit-keyframes animate02 {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-533px);

}

html动画人物走路,CSS3动画中的steps(),制作人物行走动画相关推荐

vue中使用scrollreveal制作滚动动画
现在很多产品展示的网页在滚动的时候会触发动画,如果用js去写的话需要监听scrolltop,会很繁琐,而scrollreveal.js可以完美地实现这样的效果,满足我们自定义css3动画以及支持ani ...
动画人物走路的动作规律
一.人的走路动作的基本规律人在走路中的基本规律是:左右两脚交替向前,为了求得平衡,当左脚向前迈步时左手向后摆动,右脚向前迈步时右手向后摆动.在走的过程中,头的高低形成波浪式运动,当脚迈开时头的位置略 ...
html如何设置图片循环旋转动画效果,纯CSS3实现图片无限旋转加载动画特效
纯 CSS3 实现 loading... 动画加载效果,需要一张透明的 png 图片,代码如下: HTML: CSS: /*动画效果*/ #loading-img { display: block; ...
android动画有几种,Android中常用的几种动画（总结）
1.滑动动画. 实例:比如像斗鱼直播时赠送礼物出现的礼物弹窗效果. /** * 给View添加动画效果 * @param view */ private void startShowAnimation ...
android 3d翻页动画,使用XML在Android中创建3D翻页动画
这是答案,虽然它只适用于3.0及以上版本. 1)创建一个名为"animator"的新资源文件夹. 2)创建一个新的.xml文件,我将其称为"翻转".使用以下xm ...
java字符动画思路_【轻松一刻】Java制作字符动画
前言今晚闲来无事,整理了一下电脑中尘封已久的旧代码,看着那些年自己写过的代码,踩过的坑,顿时老泪纵横.正当在感叹之际,突然发现在"马克思"文件夹下出现了一个好玩的项目,那就是N年 ...
3dsMax制作动画导入到Unity会鬼畜，3Dmax制作的动画如何导入到Unity,Unity使用3dsmax的动画出现神奇的东西
3DSmax导入模型动画到Unity鬼畜鬼畜1,神奇的联动一个模型他有很多单独的部分,每一部分都有自己单独的动画,如果到导入到Unity就会鬼畜. 例如:模型中有两个门,打开A门然后点击B门会发现 ...
android 左移动画_android旋转动画和平移动画详解，补充说一下如果制作gif动画放到csdn博客上...
先上效果图: 制作过程是先起一个模拟器,然后把GifCam的框拖到模拟器上面,点击Rec的new先,然后点击Rec,然后就save到本地成gif文件这里做一个左右旋转,上下旋转,和左右移动的动画,先 ...
css3霓虹灯文字效果以及文字背景动画
一.注意点 1.HTML5中rel属性的prefetch预加载功能 :rel='stylesheet prefetch' 2.Google字体库载入(在family加入你要的字体) <link ...
用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构该CS ...

html动画人物走路,CSS3动画中的steps(),制作人物行走动画

html动画人物走路,CSS3动画中的steps(),制作人物行走动画相关推荐

最新文章

热门文章