我正在使用
CSS3步骤转换来将sprite从一个状态设置为另一个状态.
当我开始一个动画时,它一次显示一个帧并具有很好的过渡效果(点击example中的“显示/隐藏”链接).但是当第一个转换被触发而第一个转换仍在运行时,帧位置会丢失,看起来它会滚动到另一侧而不是保持逐帧动画(点击example中的“触发错误”).
.tree {
width: 26px; /* one frame */
height: 31px; /* frame height */
background-image: url("http://rolandschuetz.at/docs/tree-animated.png");
background-repeat: no-repeat;
background-position: -234px 0; /* last frame */
transition: background-position .8s steps(10); /* this triggers the CSS3 step transition */
}
.tree-hidden {
background-position: 26px 0; /* clear,before first frame */
}
是否有办法强制动画即使在中止旧动画时也能正常工作？
PS：请不要尝试通过trigger-bug按钮“修复”,这只是为了演示目的.真正的问题是由快速的用户交互触发的,应该立即反馈.
解决方法
Updated code
检查这是否对您有所帮助.
HTML
<div class="outer"> <!--Added this div--> <div class="tree"></div> </div>
CSS：
.outer {
width: 26px;
border: 1px solid grey;
}
.tree {
width: 26px; /* one frame */
height: 31px;
background-image: url("http://rolandschuetz.at/docs/tree-animated.png");
background-repeat: no-repeat;
background-position: -234px 0; /* last frame */
-webkit-transform: scale(1);
margin: 0 auto;
/*Changed transition*/
-webkit-transition: all .8s;
-moz-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.tree-hidden {
/* background-position: 26px 0; */ /* empty,before first frame */
width: 0;
-webkit-transform: scale(0);
}
