如何在div中制作文本幻灯片

Question

＆＃13;

＆＃13;

#name
{
  width: 100px;
  height: 20px;
  background-color: lightgrey;
}

＆＃13;

<div id="name">
I am Batman I am BatmanI am Batman I am Batman
</div>

＆＃13;

＆＃13;

＆＃13;

我不知道如何解释这个问题，但我在div内有无限次迭代的名称幻灯片内容。

这是我尝试的但是没有效果。

-webkit-iteration: infinite;

Answer 1

你有正确的想法，这是一个很好的开始。您要找的是@keyframes。使用关键帧，您可以创建一个函数名称，并分别使用from和to指定起始值和结束值。

animation属性是在一行中声明多个动画属性的简写。它可以采取其他的东西

• 动画名称：在这种情况下，我们在关键帧功能中定义的move
• 动画持续时间：动画需要多长时间。在这种情况下，完成转换需要2秒钟
• animation-iteration-count ：调用函数的次数。在这里，它将无限期地继续下去。

另外，如果你没有做速记，请记住它是animation-iteration-count而不是animation-iteration。

浏览器支持

• Internet Explorer 10+（无法在IE9或更低版本中运行）
• Google Chrome：43 +
• Firefox：16 +
• Safari：9 +
• 歌剧：30 +

<强>段

＆＃13;

＆＃13;

#name {
  width: 100px;
  height: 20px;
  background-color: lightgrey;
  animation: move 2s infinite;
}

@keyframes move {
  from { margin-left: 0px; }
  to { margin-left: 100px; }
}

＆＃13;

<div id="name">
I am Batman I am BatmanI am Batman I am Batman
</div>

＆＃13;

＆＃13;

＆＃13;