jquery - 如何在将两者居中之前从屏幕外左侧滑入文本以附加到现有的居中句子

Question

我正在为 friend 的新建筑公司构建一个简单的控股页面。当页面加载时，公司名称在页面上水平居中，横跨两行:

蓝色街区

build

当页面加载时，他希望文本“Website Under”从屏幕外左侧滑入，与“Construction”在同一行中，两个词都相对于窗口居中。

蓝色街区

网站 build 中

(抱歉，不确定如何在问题中将文本居中...)

到目前为止，我已将需要动画的文本的两个部分放在一个 div 集中以内嵌显示。我找到了一些使用 CSS 关键帧的代码，但这两个位的动画效果相同，并且也无法将“Website Under”文本从显示屏的左侧移开。

<div class="headline">    
<h1 class="under-anim" >WEBSITE UNDER </h1>
<h1 class="construction">CONSTRUCTION</h1>
</div>

@keyframes slide-right {
  from {
    margin-left: -100%;
    width: 0%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.headline {
    width: 100%;
    text-align: center;
}


.headline h1 {
    display: inline;
    vertical-align: top;
    font-weight: bold;
    font-size: 57pt;
}

h1.construction {
    color: #BCBDC0; 
}

h1.under-anim {
    color: #DCDDDF;
    animation: 5s slide-right;
}

我想我需要一些帮助来编写多个关键帧。首先从左侧引入文本“Website Under”，一旦它位于“Construction”旁边的位置，滑动两者，使它们完全居中。非常感谢任何帮助。

Answer 1

$( document ).ready(function() {
var $div = $("<div/>",{"class":"under-anim","text":"WEBSITE UNDER "});
$('.slides').prepend($div);
$('.slides').css('margin-left', -$('.under-anim').width()/2);
$div.css({left:-1000,opacity : 0 });
$div.animate({'left':0,'opacity' : 1},2000, function (){
$('.slides').animate({ 'margin-left': '0px', opacity: 0.5 }, 1000);
});
}); 

.slides {
  width: 100%;
  margin:0 auto;
  text-align: center;
  display: block;
}
.slides div {
  position:relative;
  display:inline;
  vertical-align: top;
  font-weight: bold;
  font-size: 20pt;
}
.construction {
  color: #BCBDC0; 
}
.under-anim {
  color: #DCDDDF;
}

<div class="slides">
  <div class="construction">CONSTRUCTION</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>