Improve css text animation with heading and list

user_69794 0
Viewed 67

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>

css-animations css-transforms animation css
1 Answers

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

user_84405980
Related