1

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

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

.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 上有相对位置，当我以这种方式设置样式时，它们会向右挤压，没有动画）。然后回到位置：静态应该让他们正常坐下。由于某种原因，没有动画发生。有任何想法吗？

4

2 回答 2

1

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

@keyframes slide {
   0% {letter-spacing: -1em;}
   100% {letter-spacing: 0;}
}
于 2013-08-13T00:32:24.407 回答
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（运行卸载而不是跨浏览器）

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

工作小提琴

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

于 2013-08-13T01:30:12.270 回答