Question

更新：部分解决了！通过将＃span1和＃span2的位置属性更改为静态（而不是绝对），我得到了视觉链而不是重叠的跨度。但现在，animation-fill-mode: forwards的功能似乎被覆盖了;在动画结束时，整个单词会跳回到第一个关键帧，而不是停留在最后一个关键帧上。

此处更新了小提琴：http://jsfiddle.net/parola/uzwyhu9q/4/

[我已更新以下代码并更改了问题的标题，现在约为animation-fill-mode]

HTML：

<p></p>
<button onclick="startAnimation();">Run animation</button>

<section class="span-wrapper">
    <div id="span-words"></div>
</section>

CSS：

.span-wrapper{
    width: 80%;
    position: relative;
    margin: 40px;   
    font-size: 48px;
}

#span1{
    position: static;
    color: black;
    opacity: 1;
    -webkit-animation: slideToRight_1 2s ease-in-out 1 0s;
    -webkit-animation-fill-mode: forwards;
    animation: slideToRight_1 2s ease-in-out 1 0s;
    animation-fill-mode: forwards;
}

#span2{ 
    position: static;
    color: red;
    opacity: 1;
    -webkit-animation: slideToRight_1 2s ease-in-out 1 0s;
    -webkit-animation-fill-mode: forwards;
    animation: slideToRight_1 2s ease-in-out 1 0s;
    animation-fill-mode: forwards;
}


@-webkit-keyframes slideToRight_1 {
   0%   {  transform: translateX(-100px) ; }
   100% {  transform: translateX(300px) ; }
}
@keyframes slideToRight_1 {
   0%   {  transform: translateX(-100px) ; }
   100% {  transform: translateX(300px) ; }
}

JS：

function startAnimation() {

var word = {
    fullWord: "breakfast",
    piece1:  "break",
    piece2a: "fast",
}

document.querySelector('#span-words').innerHTML = '<span id="span1"></span><!----><span id="span2"></span>';

document.querySelector('#span1').innerHTML = word.piece1;
document.querySelector('#span2').innerHTML = word.piece2a;

}

此处更新了小提琴：http://jsfiddle.net/parola/uzwyhu9q/4/

有人可以解释为什么动画填充模式：前锋停止为我工作

0 个答案: