重叠的文本过渡答案

【问题标题】：Text transitions to overlap重叠的文本过渡
【发布时间】：2019-07-29 02:39:09
【问题描述】：

我一直试图让h2 元素在完全加载并停止其转换后从h1 元素的最终位置下降。我无法做到这一点，目前h2 元素只是从h1 元素下方淡入。

这是我的code：

$('#header').delay(3250).animate({ 'opacity': [1, "linear"] }, 500);
$('#subheader').delay(4000).animate({ 'opacity': [1, "linear"] }, 500);

h1, h2 {
 opacity: 0;
}

/* HEADER TRANSITION */
.moveHeader {
  -webkit-animation: headerMoving 1.5s;
  animation: headerMoving 1.5s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}

@-webkit-keyframes headerMoving {
  from {
    -webkit-transform: translateY(-30px);
  }

  to {
    -webkit-transform: translateY(0px);
  }
}

@keyframes headerMoving {
  from {
    transform: translateY(-30px);
  }

  to {
    transform: translateY(0px);
  }
}

/* SUBHEADER TRANSITION */
.moveSub {
  -webkit-animation: subMoving 1s;
  animation: subMoving 1s;
  animation-fill-mode: forwards;
  animation-delay: 4s;
}

@-webkit-keyframes subMoving {
  from {
    -webkit-transform: translateY(-10px);
  }

  to {
    -webkit-transform: translateY(0px);
  }
}

@keyframes subMoving {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header" class="moveHeader">Header</h1>
<h2 id="subheader" class="moveSub">Subheader</h2>

按下运行时动画开始需要 3/4 秒。

谢谢！

【问题讨论】：

在编辑问题时请注意，您将代码自动转换为 sn-p 并且它是 SASS 代码而不是 CSS (stackoverflow.com/questions/55850691/…)

标签： jquery css

【解决方案1】：

这样的？您只需在子标题转换中将translateY 的值从-10 更改为-50。玩它，看看什么最适合你。

试试看是否是你需要的。

$('#header').delay(3250).animate({ 'opacity': [1, "linear"] }, 500);
$('#subheader').delay(4000).animate({ 'opacity': [1, "linear"] }, 500);

h1, h2 {
 opacity: 0;
}

/* HEADER TRANSITION */
.moveHeader {
  -webkit-animation: headerMoving 1.5s;
  animation: headerMoving 1.5s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}

@-webkit-keyframes headerMoving {
  from {
    -webkit-transform: translateY(-30px);
  }

  to {
    -webkit-transform: translateY(0px);
  }
}

@keyframes headerMoving {
  from {
    transform: translateY(-30px);
  }

  to {
    transform: translateY(0px);
  }
}

/* SUBHEADER TRANSITION */
.moveSub {
  -webkit-animation: subMoving 1s;
  animation: subMoving 1s;
  animation-fill-mode: forwards;
  animation-delay: 4s;
}

@-webkit-keyframes subMoving {
  from {
    -webkit-transform: translateY(-50px);
  }

  to {
    -webkit-transform: translateY(0px);
  }
}

@keyframes subMoving {
  from {
    transform: translateY(-50px);
  }

  to {
    transform: translateY(0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header" class="moveHeader">Header</h1>
<h2 id="subheader" class="moveSub">Subheader</h2>

【讨论】：