如何使段落的动画居中？答案

【问题标题】：How do i center the animation of my paragraph?如何使段落的动画居中？
【发布时间】：2020-06-22 08:01:18
【问题描述】：

我似乎无法从中心开始动画，它是从左到右

由于我的段落居中，我希望它只从中心开始。

有什么建议吗？谢谢。

.p1 {
  display: flex;
  margin-top: 5%;
  justify-content: center;
  animation: ltr 3s steps(38);
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  width: 38ch;
}


/* Animation */

@keyframes ltr {
  0% {
    width: 0ch;
  }
  100% {
    width: 22ch;
  }
}

&lt;strong&gt;&lt;p class="p1"&gt;Simply... Privacy focused. Nontracable&lt;/p&gt;&lt;/strong&gt;

【问题讨论】：

你有一个“从中心”开始的动画的例子吗？你想让文本从两边出现吗？
@itsanewabstract 我仍在尝试在线查找示例，以便将其包含在问题中，但我似乎无法做到，动画从中心开始并以中心结束。就像它的快速打字一样。
我认为这里的问题是您将动画的 Line 放置在与写作相同的元素中 - 您应该尝试做的是创建两个一起动画的 div，然后使用 css 定位将它们重叠在一起 - 这可以通过 position: absolute
还有后续问题 - 您是否希望它现在的外观保持不变但元素的位置位于页面中心？在这种情况下 - margin: 5% auto 应该替换 margin-top: 5%;
@ChrisArakelian 我想我已经为你找到了解决方案。在下面发布了答案。希望对您有所帮助！

标签： html css flexbox css-animations

【解决方案1】：

最好的策略是将文本元素包裹在div 中，并赋予它等于100vw 的宽度。接下来，添加display: flex 和justify-content: center 以使文本元素居中。最后，确保为您的文本元素提供0 的初始宽度并制作动画forwards，以便动画结束后文本仍然存在。

这是更新后的代码：

div {
    display: flex;
    margin-top: 5%;
    justify-content: center;
    width: 100vw;
    }

.p1{
    animation: ltr 3s steps(38) forwards;
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid black;

    width: 0;
}

/* Animation */

@keyframes ltr {
    0% {
        width: 0ch;
    }

    100%{
        width: 22ch;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <strong><p class="p1">Simply... Privacy focused. Nontracable</p></strong>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

您可以将p 设为内联块（而不是使用flex），将其包装在div 中并将text-align: center 应用于该包装器div：

.p1 {
  display: inline-block;
  margin-top: 5%;
  animation: ltr 3s steps(38);
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  width: 38ch;
}

div.wrap {
  text-align: center;
}


/* Animation */

@keyframes ltr {
  0% {
    width: 0ch;
  }
  100% {
    width: 22ch;
  }
}

<div class="wrap">
  <p class="p1"><strong>Simply... Privacy focused. Nontracable</strong></p>
</div>

【讨论】：