为什么我不能用 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

Answer 2

我相信这就是你想要的效果http://jsfiddle.net/ericjbasti/q8GPq/

@keyframes slide {
   0% {letter-spacing: -1em;}
   100% {letter-spacing: 0;}
}