Improve css text animation with heading and list-CodePudding

This is is what I have coded so far Codepen.

Can ignore the background images and other elements. Just need to get the animation for the heading (i.e. in yellow) and the list below right. Any ideas on how to improve this?

body {
  background-color: purple;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  background-color: transparent;
  color: yellow;
  width: auto;
  transform: translate3d(0, 200px, 0);
  font-size: 42px;
  line-height: 48px;
}

h1 span {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
}

ul {
  list-style: none;
  margin: 50px auto 0 auto;
  padding: 0;
  width: 300px;
  opacity: 0;
}

ul li {
  list-style: none;
  padding: 15px;
  border: solid 1px #fff;
  margin-bottom: 10px;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s ease;
}

ul li:hover {
  background-color: #fff;
  color: #333;
}

@keyframes slideUpHeading {
  from {
    transform: translate3d(0, 200px, 0);
    font-size: 42px;
    line-height: 48px;
  }
  to {
    font-size: 24px;
    line-height: 30px;
    transform: translate3d(0, 0, 0);
  }
}

.slideUpHeading {
  animation-name: slideUpHeading;
  animation-delay: 2s;
  animation-duration: 0.6s;
  transform-origin: center bottom;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(1, 1, 2, 2);
}

@keyframes slideUpText {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slideUpText {
  animation-name: slideUpText;
  animation-duration: 0.6s;
  transform-origin: center bottom;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.5);
}

.animation_delay1 {
  animation-delay: 0.2s;
}

.animation_delay2 {
  animation-delay: 0.45s;
}

.animation_delay3 {
  animation-delay: 0.9s;
}

.animation_delay4 {
  animation-delay: 1.2s;
}

@keyframes slideUpList {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slideUpList {
  animation-name: slideUpList;
  animation-duration: 0.6s;
  animation-delay: 2.65s;
  transform-origin: center bottom;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.2);
}

<h1 class="slideUpHeading">
  <span class="slideUpText animation_delay1">Lorem</span><br>
  <span class="slideUpText animation_delay2">ipsum</span><br>
  <span class="slideUpText animation_delay3">dolor sit</span><br>
  <span class="slideUpText animation_delay4">amet</span>
</h1>

<ul class="slideUpList">
  <li>consectetur adipiscing elit</li>
  <li>consectetur adipiscing elit</li>
  <li>consectetur adipiscing elit</li>
  <li>consectetur adipiscing elit</li>
</ul>

CodePudding user response：

Everything looks good except bottom list animation delay. I have adjusted that along with all animation duration.. have a look.

body {
  background-color: purple;
  font-family: 'Archivo Black', sans-serif;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  background-color: transparent;
  color: yellow;
  width: auto;
  transform: translate3d(0, 200px, 0);
  font-size: 42px;
  line-height: 48px;
}

h1 span {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
}

ul {
  list-style: none;
  margin: 50px auto 0 auto;
  padding: 0;
  width: 300px;
  opacity: 0;
}

ul li {
  list-style: none;
  padding: 15px;
  border: solid 1px #fff;
  margin-bottom: 10px;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s ease;
}

ul li:hover {
  background-color: #fff;
  color: #333;
}

@keyframes slideUpHeading {
  from {
    transform: translate3d(0, 200px, 0);
    font-size: 42px;
    line-height: 48px;
  }
  to {
    font-size: 24px;
    line-height: 30px;
    transform: translate3d(0, 0, 0);
  }
}

.slideUpHeading {
  animation-name: slideUpHeading;
  animation-delay: 2s;
  animation-duration: 0.4s; /* It was 0.6s */
  transform-origin: center bottom;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(1, 1, 2, 2);
}

@keyframes slideUpText {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slideUpText {
  animation-name: slideUpText;
  animation-duration: 0.4s; /* It was 0.6s */
  transform-origin: center bottom;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.5);
}

.animation_delay1 {
  animation-delay: 0.2s;
}

.animation_delay2 {
  animation-delay: 0.45s;
}

.animation_delay3 {
  animation-delay: 0.9s;
}

.animation_delay4 {
  animation-delay: 1.2s;
}

@keyframes slideUpList {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slideUpList {
  animation-name: slideUpList;
  animation-duration: 0.4s; /* It was 0.6s */
  animation-delay: 2.20s; /* It was 2.65s */
  transform-origin: center bottom;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.2);
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo Black&family=Fredoka One&display=swap" rel="stylesheet">

<h1 class="slideUpHeading">

  <span class="slideUpText animation_delay1">which</span><br>

  <span class="slideUpText animation_delay2">statement</span><br>

  <span class="slideUpText animation_delay3">best describes</span><br>

  <span class="slideUpText animation_delay4">you?</span> <!-- Added : question mark ;) -->

</h1>

<ul class="slideUpList">
  <li>Picking up a new skill</li>
  <li>Picking up a new skill</li>
  <li>Picking up a new skill</li>
  <li>Picking up a new skill</li>
</ul>

Play here