css - 为什么我不能用 CSS 动画改变位置

Question

我想制作一个动画，让标语的所有单词在右侧开始相互挤压，然后向左滑动到位。

我将标语中的每个词都包裹在一个 span 标签中，并给它一个“幻灯片”类。然后我设计了这样的幻灯片:

.slide {
right: 0; 
animation: slide 5s; 
-webkit-animation: slide 5s;
}

然后像这样制作动画:

@keyframes slide {
0% {position: absolute;}
100% {position: static;}
}
@-webkit-keyframes slide {
0% {position: absolute;}
100% {position: static;}
}

我不明白为什么这不起作用。使用 position: absolute 他们应该向右挤压(我在包含的 div 上有相对位置，并且当我以这种方式设置样式时他们会向右挤压，没有动画)。然后回到位置:静态应该让他们正常坐下。出于某种原因，没有动画发生。有任何想法吗？

Answer 1

另一个版本使用过渡而不是动画 - 由 javascript 触发。

这个版本可能有点脆弱，因为它依赖于一些试验和错误来让单词最初对齐。买家当心:)

CSS - 这会在屏幕外设置容器，并为标语中的单词设置初始位置(也不是跨浏览器)

.container {
    position: absolute;
    left: 100%;
    right: 0;
    white-space: nowrap;
    -webkit-transition: left 1.5s ease;
}

.container > span {
    position: relative;
    -webkit-transition: all 1.5s ease;
}

/* Has enough specificity to override the nth-child selectors */
div.container.show > span {
    left: 0;
}

.container > span:nth-child(2) { left: -2em; }
.container > span:nth-child(3) { left: -3em; }
.container > span:nth-child(4) { left: -4em; }

.show {
    left: 0;
}

HTML

<div id="tagline" class="container">
    <span>This</span>
    <span> is</span>
    <span> a</span>
    <span> tagline</span>
</div>

Javascript(运行卸载 & not cross-browser)

var tagline = document.getElementById('tagline');
tagline.classList.add('show');

Working fiddle

有关可动画属性的列表，请参阅:Animatable properties