实现场景：

问题描述：

显而易见，实现这种功能需要用到了两个动画，平移与打字机效果的动画（steps）
每一个人物之间存在一定距离，可以通过动画开始时间animation-delay控制
从左到右的运动是慢慢移动的，而不是一下子呈现出来的，人物事先所处的位置（起始点）应该在屏幕的0的位置的左边，eg：-200px处
但是尽管如此仍然出现小bug，如下图所示：

原因分析：

即使动画的初始状态时把人物设置在-200px处，但是由于div盒子标签仍然占据位置，肉眼仍能看见。从第二个人物开始，他们都是要等待一定时间才开始的，在等待开始的这段时间里，他们会继续占着当前标签的位置，呈现的效果会很难看。当他们开始做动画，会突然跳到-200px处再开始，呈现效果难看。而第一个虽然不受影响，但是之后的人物收到严重的影响。

解决方案：

在初始的盒子标签中增加opacity: 0;属性，通过设置透明度达成视觉上的看不见，在动画里面再修改为opacity: 1;使这个动画从-200px处，正常的移动出来。

全部代码：

    <div class="box"><!-- 两个盒子一个控制距离，一个控制原地走  --><div class="walk01"><div class="west01"></div></div><div class="walk02"><div class="west02"></div></div><div class="walk03"><div class="west03"></div></div><div class="walk04"><div class="west04"></div></div></div>

    <style>.box {position: fixed;width: 100%;height: 175px;left: 0;bottom: 0;}.walk01 {position: absolute;left: 0;bottom: 0;width: 154px;height: 121px;opacity: 0;animation: move 15s linear infinite;}.west01 {width: 154px;height: 121px;background: url(images/txgc_6d0e9e5.png) no-repeat;animation: play01 1s steps(2) infinite;}@keyframes move {0% {opacity: 1;transform: translate(-200px, 0);}100% {transform: translate(1920px, 0);opacity: 1;}}@keyframes play01 {0% {background-position: 0 0;}100% {background-position: -308px 0;}}.walk02 {position: absolute;left: 0;bottom: 0;width: 170px;height: 176px;opacity: 0;animation: move 15s linear infinite;animation-delay: 2s;}.west02 {width: 170px;height: 176px;background: url(images/txgh_fee2457.png) no-repeat;animation: play02 1s steps(2) infinite;}@keyframes play02 {0% {background-position: 0 0;}100% {background-position: -334px 0;}}.walk03 {position: absolute;left: 0;bottom: 0;width: 176px;height: 149px;opacity: 0;animation: move 15s linear infinite;animation-delay: 4s;}.west03 {width: 176px;height: 149px;background: url(images/txgl_c15cfd8.png) no-repeat;animation: play03 1s steps(2) infinite;}@keyframes play03 {0% {background-position: 0 0;}100% {background-position: -322px 0;}}.walk04 {position: absolute;left: 0;bottom: 0;width: 185px;height: 157px;opacity: 0;animation: move 15s linear infinite;animation-delay: 6s;}.west04 {width: 185px;height: 157px;background: url(images/txgq_d281c9b.png) no-repeat;animation: play04 1s steps(2) infinite;}@keyframes play04 {0% {background-position: 0 0;}100% {background-position: -342px 0;}}</style>

阴阳师（动画）：4个人一起从左往右走相关推荐

html怎么从左到右设置颜色,使用CSS从左到右填充文本颜色(Text colour fill from left to right using CSS)...
使用CSS从左到右填充文本颜色(Text colour fill from left to right using CSS) 我试图动画有".popUpWord"类的文本. 在悬停 ...
css3 动画右侧进入,css3动画（从上、左下、左、右进入页面）
/*动画-start*/.animated{animation-duration:1.5s !important;-webkit-animation-duration:1.5s !important; ...
微信小程序界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
css3 div从左到右滑入
css3 div从左到右滑入实现div从左到右滑入,代码如下: // lToR定义一个动画 @keyframes lToR{from {width: 0px;}}@-moz-keyframes lT ...
抖音上css照片动态旋转怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
php图片滑动怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
android 左滑右滑,Android仿滴答清单左滑右滑效果
直接上效果图记录仿写滴答清单App 过程中的技术点本文分为以下章节,读者可按需阅读: 1.自定义RecycleItemTouchHelper 2.实现滴答清单左滑右滑效果 3.RecycleVie ...
Android实现从左往右TextView淡入淡出渐变效果
首先跟大家说声抱歉,由于最近鄙人感冒身体欠安,所以博客很久没更新了,我觉得是时候不玩捉迷臧了,废话不多说,还是老套路,上效果图! 其实实现原理很简单首先我们看一张图,画的少不喜随便喷哈哈! 其实说白了 ...
四元数左乘右乘_四元数——旋转
四元数系列: ----------------------------------------- 首先很感谢各位的支持,本来我也就是说写个自己看的笔记啥的,没想到那么多人点赞.本篇主要介绍旋转相关的知 ...

阴阳师（动画）：4个人一起从左往右走