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 回答