竖排文字滑动，一句一句

Question

我正在努力想出一个使用 CSS 动画的文本 silder。我所追求的是从短语列表中一次显示一个短语。一个短语从右侧滑入，保持（暂停）并从右侧滑出，然后下一个短语滑入。依此类推。

这就是我目前所做的工作。但似乎使用动画延迟方法不是可行的方法。有人对如何让这些文本短语整齐地一个接一个地滑动有什么建议吗？

    ul {
        padding: 0;
        margin: 0;
    }

    .wrapper div {
        width: 100%;
    }

    .list li {
        width: 100%;
        max-width: 600px;
        display: flex;
        justify-content: center;
        opacity: 0;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
    }

    .item-a {
        animation: slideIn 4s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98) infinite;
    }
    .item-b {
        /* Start with 4 seconds delay */
        animation: slideIn 4s 4s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98) infinite;
    }
    .item-c {
        /* Start with 8 seconds delay */
        animation: slideIn 4s 8s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98) infinite;
    }

    @keyframes slideIn {
        0% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
        20% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        80% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        99.99% {
            transform: translate3d(-50%, 0, 0);
            opacity: 0;
        }
        100% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
    }

<div class="wrapper">
    <div>
        <ul class="list slider">
        <li class="item-a">
            You are cool!
        </li>
        <li class="item-b">
            Well done!
        </li>
        <li class="item-c">
            Keep on going!
        </li>
        </ul>
    </div>
</div>

Answer 1

如果您不介意使用 javascript（也许不是对您问题的直接回答），您可以通过在动画结束后删除 li 元素来解决它，然后添加不同文字的新版本。

最大的优点是您可以轻松地向列表中添加更多文本，而无需调整 CSS 文件。

const texts = ["You are cool", "Well done", "Keep on going!"]
const ul = document.querySelector("ul");
let counter = 0


function addAnimation() {
const li = document.createElement("li");
    li.innerText = texts[counter];
    ul.appendChild(li);


  li.classList.add("animated-item");
  li.addEventListener('animationend', (e) => {
    e.target.remove();
    counter++;
    if(counter == texts.length) counter = 0;
    addAnimation();
  });
}

addAnimation();

 ul {
   padding: 0;
   margin: 0;
}

.wrapper div {
  width: 100%;
}

.list li {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  opacity: 0.4;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

.animated-item {
  animation: slideIn 4s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98);
}

@keyframes slideIn {
  0% {
    transform: translate3d(50%, 0, 0);
    opacity: 0.5;
  }
  20% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  80% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0.5;
  }
}

<div class="wrapper">
    <div>
        <ul class="list slider">
        </ul>
    </div>
</div>

Answer 2

您可以使用纯 CSS/HTML 和使用动画延迟来执行此操作 - 但动画中的 %s 和动画的总长度需要更改。

每个短语显示 4 秒，然后在其他短语显示时消失 8 秒，因此整体动画时间为 12 秒，前三分之一的短语将显示，剩下的三分之二将显示被隐藏。

将动画中的 %s 除以 3，我们得到：

   @keyframes slideIn {
        0% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
        6.66% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        26.66% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        33.30% {
            transform: translate3d(-50%, 0, 0);
            opacity: 0;
        }
        33.33% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
        100% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
    }

现在，使用您已经内置的动画延迟，但将每个短语的整体动画持续时间更改为 12 秒，这些短语将永远一个接一个地出现。

这是片段：

    ul {
        padding: 0;
        margin: 0;
    }

    .wrapper div {
        width: 100%;
    }

    .list li {
        width: 100%;
        max-width: 600px;
        display: flex;
        justify-content: center;
        opacity: 0;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
    }

    .item-a {
        animation: slideIn 12s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98) infinite;
    }
    .item-b {
        /* Start with 4 seconds delay */
        animation: slideIn 12s 4s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98) infinite;
    }
    .item-c {
        /* Start with 8 seconds delay */
        animation: slideIn 12s 8s forwards cubic-bezier(0.1, 0.67, 0.29, 0.98) infinite;
    }

    @keyframes slideIn {
        0% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
        6.66% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        26.66% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        33.30% {
            transform: translate3d(-50%, 0, 0);
            opacity: 0;
        }
        33.33% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
        100% {
            transform: translate3d(50%, 0, 0);
            opacity: 0;
        }
    }

<div class="wrapper">
    <div>
        <ul class="list slider">
        <li class="item-a">
            You are cool!
        </li>
        <li class="item-b">
            Well done!
        </li>
        <li class="item-c">
            Keep on going!
        </li>
        </ul>
    </div>
</div>

对于不同数量的短语，您可以相应地更改 %s。

竖排文字滑动，一句一句

Vertical text sliding, one phrase after another

css

css-animations