我如何将我的段落的 animation 居中？

Question

i can't seem to start the animation from the center, it goes from left to right我似乎无法从中心启动 animation，它从左到右

Since my paragraph is centered, i want it to start from the center only.由于我的段落居中，我希望它只从中心开始。

any suggestions?有什么建议么？ Thank you.谢谢你。

 .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; } }

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

Answer 1

Best strategy is to wrap the text element in a div and give it a width equal to 100vw .最好的策略是将文本元素包装在一个div中，并给它一个等于100vw的宽度。 Next, add display: flex and justify-content: center to center the text element.接下来，添加display: flex和justify-content: center以使文本元素居中。 Finally, make sure to give your text element an initial width of 0 and make the animation forwards so that the text remains after the animation is over.最后，确保将文本元素的初始宽度设置为0 ，并使 animation forwards移动，以便在 animation 结束后保留文本。

Here's the updated code:这是更新的代码：

 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>

Answer 2

You can make the p an inline-block (instead of using flex ), wrap it in a div and apply text-align: center to that wrapper div:您可以使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>

我如何将我的段落的 animation 居中？

问题描述

2 个解决方案

解决方案1
0 2020-06-21 23:52:58

解决方案2
0 2020-06-21 23:59:15

我如何将我的段落的 animation 居中？

问题描述

2 个解决方案

解决方案1 0 2020-06-21 23:52:58

解决方案2 0 2020-06-21 23:59:15

解决方案1
0 2020-06-21 23:52:58

解决方案2
0 2020-06-21 23:59:15