How do I make website text animated using css and html as my version is not working

user_8317923 0
Viewed 19

I am trying to create similar css animation like in below webpage

https://demos.cryoutcreations.eu/wp/bravada/jetpack-portfolio/

Its not working at all. Can someone please help, what I am doing wrong here ?

My css and html code:

.animated-title .caption-title-word {
  display: inline-block;
  font-style: normal;
}

.animated-title .caption-title-word>span {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  opacity: 0;
  -webkit-animation: showwords 2.5s ease forwards;
  animation: showwords 2.5s ease forwards;
}

.animated-title .caption-title-word>span:nth-child(n) {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
}

.animated-title .caption-title-word>span:nth-child(2n) {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.animated-title .caption-title-word>span:nth-child(3n) {
  -webkit-animation-duration: 2.8s;
  animation-duration: 2.8s;
}

.animated-title .caption-title-word>span:nth-child(4n) {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}

.animated-title .caption-title-word>span:nth-child(5n) {
  -webkit-animation-duration: 3.6s;
  animation-duration: 3.6s;
}

.animated-title .caption-title-word>span:nth-child(6n) {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
}

.animated-title .caption-title-word>span:nth-child(7n) {
  -webkit-animation-duration: 3.2s;
  animation-duration: 3.2s;
}

.animated-title .caption-title-word>span:nth-child(8n) {
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;
}

.animated-title .caption-title-word>span:nth-child(9n) {
  -webkit-animation-duration: 2.8s;
  animation-duration: 2.8s;
}

@-webkit-keyframes showwords {
  to {
    opacity: 1;
  }
}

@keyframes showwords {
  to {
    opacity: 1;
  }
}

.animated-title .caption-title-word span.cry-single {
  position: relative;
}

.animated-title .caption-title-word span.cry-double {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.animated-title span.cry-single,
.animated-title span.cry-double {
  -webkit-transition: color .5s ease-out;
  transition: color .5s ease-out;
}

.animated-title .caption-title-word>span:nth-child(n) span.cry-single.animated-letter {
  -webkit-animation: 1.5s 0.25s animation-slideLeftHide ease-in-out forwards;
  animation: 1.5s 0.25s animation-slideLeftHide ease-in-out forwards;
}

.animated-title .caption-title-word>span:nth-child(2n) span.cry-single.animated-letter {
  -webkit-animation: 1.5s 0.25s animation-slideRightHide ease-in-out forwards;
  animation: 1.5s 0.25s animation-slideRightHide ease-in-out forwards;
}

.animated-title .caption-title-word>span:nth-child(n) span.cry-double.animated-letter {
  -webkit-animation: 1s animation-slideRightShow ease-in-out forwards;
  animation: 1s animation-slideRightShow ease-in-out forwards;
}

.animated-title .caption-title-word>span:nth-child(2n) span.cry-double.animated-letter {
  -webkit-animation: 1s animation-slideLeftShow ease-in-out forwards;
  animation: 1s animation-slideLeftShow ease-in-out forwards;
}
<div class="animated-title">
  <em class="caption-title-word">
    <span>
      <span class="cry-single" style="animation-delay: 0s;">J</span>
      <span class="cry-double" style="animation-delay: 0s;">J</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">e</span>
      <span class="cry-double" style="animation-delay: 0s;">e</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">t</span>
      <span class="cry-double" style="animation-delay: 0s;">t</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">p</span>
      <span class="cry-double" style="animation-delay: 0s;">p</span>
    </span>
    <span>
      <span class="cry-single animated-letter" style="animation-delay: 0ms;">a</span>
      <span class="cry-double animated-letter" style="animation-delay: 0ms;">a</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">c</span>
      <span class="cry-double" style="animation-delay: 0s;">c</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">k</span>
      <span class="cry-double" style="animation-delay: 0s;">k</span>
    </span>
    <span>&nbsp;</span>
  </em>
  <em class="caption-title-word">
    <span>
      <span class="cry-single" style="animation-delay: 0s;">P</span>
      <span class="cry-double" style="animation-delay: 0s;">P</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">o</span>
      <span class="cry-double" style="animation-delay: 0s;">o</span>
    </span>
    <span>
      <span class="cry-single animated-letter" style="animation-delay: 0ms;">r</span>
      <span class="cry-double animated-letter" style="animation-delay: 0ms;">r</span>
    </span>
    <span>
      <span class="cry-single animated-letter" style="animation-delay: 0ms;">t</span>
      <span class="cry-double animated-letter" style="animation-delay: 0ms;">t</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">f</span>
      <span class="cry-double" style="animation-delay: 0s;">f</span>
    </span>
    <span>
      <span class="cry-single animated-letter" style="animation-delay: 0ms;">o</span>
      <span class="cry-double animated-letter" style="animation-delay: 0ms;">o</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">l</span>
      <span class="cry-double" style="animation-delay: 0s;">l</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">i</span>
      <span class="cry-double" style="animation-delay: 0s;">i</span>
    </span>
    <span>
      <span class="cry-single" style="animation-delay: 0s;">o</span>
      <span class="cry-double" style="animation-delay: 0s;">o</span>
    </span>
  </em>
</div>

I am using code from the webpage and replicating the same.

Thank you so much !

css
0 Answers
Related