CODEWITHSUNDEEP
htmlcss
Ahmad Jaza
Ahmad Jaza

Reputation: 3

Problems with css3 animation bouncing letters

i wanted to use animation in CSS like (jumping Letters) but apparently it doesnt work , the word it self moves upward but i want each letter to bounce by its self , tell me whats wrong with this thing ?? i am a beginner by the way. thanks!! note: the css file is external.

HTML

        <body>
            <center>
            <div class="txt">
                <h1>
                <span>H</span>
                <span>e</span>
                <span>l</span>
                <span>l</span>
                <span>o</span>
                </h1>
            </div>
            </center>

        </body>
        </html>

CSS

 body {

        background-color: pink;
    }

    .txt {
        position: relative;
        top: 300px;
        color: black;
        font-size: 60px;
        font-weight: 500;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        animation: test 2s infinite ;
    }

    h1 span:nth-child(1) {
        animation-delay: 0.25s;
    }

    h1 span:nth-child(2) {
        animation-delay: 0.5s;
    }

    h1 span:nth-child(3) {
        animation-delay: 0.75s;
    }

    h1 span:nth-child(4) {
        animation-delay: 1s;
    }

    h1 span:nth-child(5) {
        animation-delay: 1.25s;
    }

    @keyframes test {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-25px);
        }
        100% {
            transform: translateY(0);
        }
    }

Upvotes: 0

Views: 167

Answers (1)

aprouja1
aprouja1

Reputation: 1810

You need to put the animation on the span, not the h1, you will also need to add a display property to the span 

body {
  background-color: pink;
}

.txt {
  position: relative;
  top: 300px;
  color: black;
  font-size: 60px;
  font-weight: 500;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h1 span {
  display: inline-block;
  animation: test 2s infinite;
}

h1 span:nth-child(1) {
  animation-delay: 0.25s;
}

h1 span:nth-child(2) {
  animation-delay: 0.5s;
}

h1 span:nth-child(3) {
  animation-delay: 0.75s;
}

h1 span:nth-child(4) {
  animation-delay: 1s;
}

h1 span:nth-child(5) {
  animation-delay: 1.25s;
}

@keyframes test {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}
<center>
  <div class="txt">
    <h1>
      <span>H</span>
      <span>e</span>
      <span>l</span>
      <span>l</span>
      <span>o</span>
    </h1>
  </div>
</center>

Upvotes: 1

Related Questions