CODEWITHSUNDEEP
htmlcssweb
Isonlaxman
Isonlaxman

Reputation: 93

CSS typing effect not working

So I have this little code for the paragraphs within a div for simulating a typing effect on hover on the div: 

.about-panel:hover p {
    color: white;
    font-size: 1em;

    white-space: wrap;
    overflow: hidden;


    -webkit-animation: typing 4s steps(1000, end),
    blink-caret .5s step-end infinite alternate;
}

But it does not seem to work? The text just appears in one go at the end of 4s

Here is the code for the animations: 

@-webkit-keyframes typing {
    from {
        width: 0;
    }
}

@-webkit-keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}

Can you help me out? What am I doing wrong?

Upvotes: 0

Views: 745

Answers (1)

Tushar
Tushar

Reputation: 4418

This what can be done. If you want to keep text showing once its hover you may need to add add class to it once hovered.

.about-panel {
  float: left;
}

.about-panel p {
  border-right: .15em solid transparent;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
}

.about-panel:hover p {
  width: 100%;
  transition: width 0.3s;
  animation: blink-caret .5s step-end infinite;
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}
<div class="wrapper">
  <div class="about-panel">
  Hover here
    <p>Hello Worls !!!</p>
  </div>
</div>

Upvotes: 1

Related Questions