Question

我有一个想法是创建一个动画，其中标语的所有单词将在右侧开始压扁，然后向左滑动到位。

我将标语中的每个单词都包含在一个span标记中，然后给它一个＆＃34; slide＆＃34;。然后我像这样设置幻灯片：

.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

我相信这是你对http://jsfiddle.net/ericjbasti/q8GPq/

的影响

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

Answer 2

使用过渡而不是动画的另一个版本 - 由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（运行卸载＆amp; not cross-browser）

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

Working fiddle

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

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

2 个答案: