动画文本@keyframes onload salidein答案

【问题标题】：animation text @keyframes onload salidein动画文本@keyframes onload salidein
【发布时间】：2022-01-19 01:44:45
【问题描述】：

需要帮助！我需要滑入整个 div texte1 而不移动里面的内容（h2 和 p）。我尝试在 div 上使用蒙版动画，但它不起作用。请有任何建议！

<div class="container">
  <div class="texte1">
    <h2>This is a title</h2>
    <p> This is a simple text animation  This is a simple text animation  This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation</p>
  </div>
</div>

.container {
  border:1px solid red;
  width:800px;
  height:200px;
}
.texte1 {
  animation: slidein 1s ease-in;
  animation-fill-mode: forwards;
  overflow:hidden;
  border:1px solid green;
}

@keyframes slidein {
  from {
      width: 0px;
  }
  to {
      width: 100%;
  }
}

https://jsfiddle.net/Lounahlem/vb8p23qu/1/

【问题讨论】：

您能多描述一下这里的“不动”是什么意思吗？您是否希望整个 div 以适当的宽度滑入 - 即您不会让文本从几行移动到更少的行？

标签： css animation

【解决方案1】：

给出的代码从零开始宽度。这意味着所包含的文本会在开始时在几行上移动，并随着元素的变宽而最终在更少的行上。

这个 sn-p 转换整个元素 - 最初完全离开屏幕到左侧，然后通过将最终转换为 0 将其引入。

.container {
  border: 1px solid red;
  width: 800px;
  height: 200px;
}

.texte1 {
  animation: slidein 1s ease-in;
  animation-fill-mode: forwards;
  overflow: hidden;
  border: 1px solid green;
}

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

<div class="container">
  <div class="texte1">
    <h2>This is a title</h2>
    <p> This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation</p>
  </div>
</div>

【讨论】：