为什么没有足够的 space 来容纳这个动画中的单词？

Question

我正在尝试在我的网站主页上显示经过的文字动画。

有两个文本需要显示。 “你来对地方了”和“我们关心你”，在欢迎文字旁边。

出于某种原因，它是这样的：

我要欢迎！出现的文本紧接着是第一句话，几秒钟后，欢迎和第一句话应该消失，第二句话应该出现。

CSS

/* animation  welcome text styling  */

.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;

}

.intro1 {  
  animation: showup 7s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;

}

.intro2 {

 font-size:30px;
  animation: reveal 7s infinite;
  width:400px;


}

.sub-head {
  margin-left:-355px;
  animation: slidein 7s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  width: 100px;
  background-color: darkolivegreen;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-600px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


/* end of text animation */

HTML:

<div class= "first-box"> 


<!-- a welcome text is placed here to grasp the users' attention to the website. -->

 <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> You've come to the right place</span>
    <span class="sub-head inactive">We care about you </span>
  
  </div>



 

  </div>

JS:

// sets the interval for which the function will run, in this case 8 seconds, (8000)
setInterval(function() {
  // grab all elements with class 'sub-head' and stores it in the elems const. 
  const elems = document.querySelectorAll('.sub-head')


  elems.forEach(e => {
     // check if the element has a class 'inactive', if there is one, remove it
    if (e.classList.contains('inactive')) e.classList.remove('inactive')
    // if not, add it. This is how it creates a loop. 
    else e.classList.add('inactive');
  });
}, 8000)

Answer 1

尝试添加 inactive class 并将宽度设置为 455（在 @keyframes reveal）：

setInterval(function() {
  const elems = document.querySelectorAll('.sub-head')
  elems.forEach(e => {
    if (e.classList.contains('inactive')) e.classList.remove('inactive')
    else e.classList.add('inactive');
  });
}, 8000)

.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;
}

.intro1 {  
  animation: showup 7s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;
}

.intro2 {
  font-size:30px;
  animation: reveal 7s infinite;
  width:400px;
}

.inactive {
  display: none;
}
.sub-head {
  margin-left:-5px;
  animation: slidein 7s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  width: 200px;
  background-color: darkolivegreen;
}

@keyframes showup {
  0% {opacity:0;}
  20% {opacity:1;}
  80% {opacity:1;}
  100% {opacity:0;}
}

@keyframes slidein {
  0% { margin-left:-800px; }
  20% { margin-left:-600px; }
  35% { margin-left:0px; }
  100% { margin-left:0px; }
}

@keyframes reveal {
  0% {opacity:0;width:0px;}
  20% {opacity:1;width:0px;}
  30% {width:455px;}
  80% {opacity:1;}
  100% {opacity:0;width:455px;}
}

<div class= "first-box"> 
  <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> You've come to the right place</span>
    <span class="sub-head inactive">We care about you </span>
  </div>
</div>

Answer 2

做一些改变

const timeout = 15000
const elems = document.querySelectorAll('.sub-head')
//for each slide make equal times
const forEachSlide = timeout / elems.length
const intro1 = document.querySelector('.intro1')
const intro2 = document.querySelector('.intro2')

//change timeouts of intros (also can set in the css file)
intro1.style.animationDuration = `${timeout}ms`
intro1.style.animationIterationCount = 'infinite'
intro2.style.animationDuration = `${timeout/2}ms`
intro2.style.animationIterationCount = 'infinite'

//timeout of each '.inactive'changes
  let showId = setTimeout(function blockShow(){
    elems.forEach(e => {
      if (e.classList.contains('inactive')) {
        e.classList.remove('inactive')  
      } else e.classList.add('inactive');
  });
    showId = setTimeout(blockShow, forEachSlide)
  }, forEachSlide)

.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;
}

.intro1 {  
  animation-name: showup;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;
}

.intro2 {
 font-size:30px;
 animation-name: reveal;
 /*width auto makes the block size of this content so all words fit in it*/
  width:auto;
  /*max-width makes maximum width of block where words can be placed*/
  max-width: 1000px;
}

.sub-head{
  display: none;
}

.sub-head.inactive {
  display: inline-block;
  margin-left:-355px;
  animation: slidein 7s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  width: 100%;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-600px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:auto;}
    80% {opacity:1;}
    100% {opacity:0;width:auto;}
}

<div class= "first-box"> 

 <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> You've come to the right place</span>
    <span class="sub-head inactive">We care about you </span>
  
  </div>
  </div>

为什么没有足够的 space 来容纳这个动画中的单词？

Why is there not enough space for the words to fit in, in this animation?

html

javascript

css

arrays

css-animations