Javascript 从当前位置（而不是0宽度）启动CSS类型文本动画_Javascript_Html_Css

Javascript 从当前位置（而不是0宽度）启动CSS类型文本动画

javascript html css

Javascript 从当前位置（而不是0宽度）启动CSS类型文本动画,javascript,html,css,Javascript,Html,Css,我是CSS动画新手，正在尝试获得文本输入效果。我使用各种在线教程中的参考资料实现了它问题: 当我在我的网站容器中添加这个div时，比如说900px宽，所有东西都对齐到中心，动画从0 px宽开始，完成并笨拙地滑动到中心对齐我希望动画不要滑到中心，而是从中心位置开始，优雅地结束这是我的代码：正文{ 宽度：900px；文本对齐：居中； } .typetext{ /*颜色：青柠*/ /*字体系列：“信使”*/ 字体大小：20px； /*利润率：10px 0 10px*/ 空白：nowrap；

我是CSS动画新手，正在尝试获得文本输入效果。我使用各种在线教程中的参考资料实现了它

问题: 当我在我的网站容器中添加这个div时，比如说900px宽，所有东西都对齐到中心，动画从0 px宽开始，完成并笨拙地滑动到中心对齐

我希望动画不要滑到中心，而是从中心位置开始，优雅地结束

这是我的代码：

正文{
宽度：900px；
文本对齐：居中；
}
.typetext{
/*颜色：青柠*/
/*字体系列：“信使”*/
字体大小：20px；
/*利润率：10px 0 10px*/
空白：nowrap；
溢出：隐藏；
宽度：100%；
动画：键入4s步骤（60，结束）；
}
.typetext:n子项（2）{
动画：键入2 8s步骤（60，结束）；
}
@关键帧类型{
从{
宽度：0；
}
}
@关键帧类型2{
0% {
宽度：0；
}
50% {
宽度：0；
}
100% {
宽度：100；
}
}


准备好投资并专注于增长

我添加了显示：内联块；到.typetext类。我希望这就是你的目标

正文{
宽度：900px；
文本对齐：居中；
}
.typetext{
/*颜色：青柠*/
/*字体系列：“信使”*/
字体大小：20px；
/*利润率：10px 0 10px*/
空白：nowrap；
溢出：隐藏；
显示：内联块；
宽度：100%；
动画：键入4s步骤（60，结束）；
}
.typetext:n子项（2）{
动画：键入2 8s步骤（60，结束）；
}
@关键帧类型{
从{
宽度：0；
}
}
@关键帧类型2{
0% {
宽度：0；
}
50% {
宽度：0；
}
100% {
宽度：100；
}
}


准备好投资并专注于增长

请参见

正文{
文本对齐：居中；
}
.typetext{
/*颜色：青柠*/
/*字体系列：“信使”*/
字体大小：20px；
/*利润率：10px 0 10px*/
空白：nowrap；
溢出：隐藏；
-webkit动画：5s型；
}
@关键帧类型{
0%{宽度：0px；边距：0自动；}
100%{宽度：100%；边距：0自动；}
}


准备好投资并专注于增长
！[
身体{
宽度：900px；
文本对齐：居中；
保证金：自动；
边框：纯黑1px；
}
.typetext{
/*颜色：青柠*/
/*字体系列：“信使”*/
字体大小：20px；
/*利润率：10px 0 10px*/
空白：nowrap；
溢出：隐藏；
宽度：565px；
动画：键入4s步骤（60，结束）；
}
.typetext:n子项（2）{
动画：键入2 8s步骤（60，结束）；
}
@关键帧类型{
从{
宽度：0；
}
}
@关键帧类型2{
0% {
宽度：0；
}
50% {
宽度：0；
}
100% {
宽度：100；
}
}
准备好投资并专注于增长
][1]
没有。它只是减少了整个div，而不是将其居中，也没有在某种程度上显示完整的文本是的。但我希望文本从左侧开始/显示，而不是从右侧或中间。任何这样做的方法都可以将.typetext div包含到另一个div中。让我们称此div.mycontainer。mycontainer{宽度：600px；文本对齐：左；边距：0自动；}。这行得通，但你现在需要调整文本的长度。谢谢，但我想从左边开始。我该怎么做
 .typetext {
  /*  color: lime; */
  /*  font-family: "Courier";*/
  font-size: 20px;
  /*  margin: 10px 0 0 10px;*/
  white-space: nowrap;
  overflow: hidden;
  width: 565px;
  animation: type 4s steps(60, end);
}

    ![<style>
body {
  width: 900px;
  text-align: center;
  margin: auto;
  border: solid black 1px;
}
.typetext {
  /*  color: lime; */
  /*  font-family: "Courier";*/
  font-size: 20px;
  /*  margin: 10px 0 0 10px;*/
  white-space: nowrap;
  overflow: hidden;
  width: 565px;
  animation: type 4s steps(60, end);
}
.typetext:nth-child(2) {
  animation: type2 8s steps(60, end);
}
@keyframes type {
  from {
    width: 0;
  }
}
@keyframes type2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}
</style>
<body>
  <div class="row lead typetext" id="anim5" style="clear:both; padding-top:10px; font-size:25px; font-weight:600; margin: 0 165px">
    <div style="width: 100%; margin: 0 auto;">Getting you investment ready and focused on growth</div>
  </div>
</body>][1]