CODEWITHSUNDEEP
css
sina majdieh
sina majdieh

Reputation: 21

My css animation code does not work smoothly

Hello I want to have smooth typing animation in css but my code doesn't work smoothly My text just appears on the screen suddenly Here's my css code:

.title-text {
    white-space: nowrap;
    overflow: hidden;
    animation: typing 4s steps(40) 1s 1 normal both;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: fit-content;
    }
}

Thanks in advance

Upvotes: 1

Views: 54

Answers (4)

Stefan Popovski
Stefan Popovski

Reputation: 516

Maybe you can try with this:

.title-text h1 {
     overflow: hidden;
     border-right: .15em solid orange;
     white-space: nowrap;
     margin: 0 auto;
     letter-spacing: .15em;
     animation: 
        typing 3.5s steps(30, end),
        blink-caret .5s step-end infinite;
 }

 @keyframes typing {
    from { width: 0 }
    to { width: 100% }
 }

 @keyframes blink-caret {
     from, to { border-color: transparent }
     50% { border-color: orange }
 }

HTML:

<div class="title-text">
  <h1>This is a Heading.</h1>
</div>

Upvotes: 0

symlink
symlink

Reputation: 12209

You can achieve this with transform: scaleX(n) where n transitions from 0 to 1:

.title-text{
    white-space: nowrap;
    overflow: hidden;
    animation: typing .4s steps(40) 0s 1 normal both;
    display:inline-block;
    transform-origin:left;
}

@keyframes typing{
    from{
        transform: scaleX(0);
    }to{
        transform: scaleX(1)
    }
}
<div class="title-text">This is the title</div>

Upvotes: 0

vishnu sandhireddy
vishnu sandhireddy

Reputation: 1176

You have to pass specific width. The fit-content seems to be not working.

.title-text {
  white-space: nowrap;
  overflow: hidden;
  animation: typing 4s steps(40) 1s 1 normal both;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}

Upvotes: 1

AwaisHassan
AwaisHassan

Reputation: 74

Try this code

.title-text{

    white-space: nowrap;
    overflow: hidden;
    animation: typing 1s steps(40) 1s 4 normal both;

}
@keyframes typing{
    from{
        width: 0;
    }to{
        width: 100px;
    }
}

Upvotes: 0

Related Questions