我有一个想法来创建一个动画,其中标语的所有单词将开始在右侧相互挤压,然后向左滑动到位。
我将标语中的每个单词都包裹在一个跨度标签中,并给它一个“幻灯片”类。然后我设计了这样的幻灯片:
.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 上有相对位置,当我以这种方式设置样式时,它们会向右挤压,没有动画)。然后回到位置:静态应该让他们正常坐下。由于某种原因,没有动画发生。有任何想法吗?