Is there a way to hide the blinking cursor at the conclusion of the animation after 3 seconds?

Question

Is there a way to hide the blinking cursor at the conclusion of the animation after 3 seconds?

I've been working on this HTML snippet

      <div class=typewriter>
        <h1>Lorem Ipsum</h1>
      </div>

and included some CSS styles as well

.typewriter {
    display: inline-block;
}

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

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink {

    0%,
    100% {
        border-color: black;
    }

    50% {
        border-color: transparent;
    }
}

The animation works great, but I want the cursor to disappear at the end of the animation, which lasts for 3 seconds.

Any suggestions on how to achieve this? Also, are there any other improvements I could make?

I've checked similar questions without finding a solution yet.

css frontend

Answer 1

Answer №1

Another option is to include an additional keyframe.

.typewriter {
  display: inline-block;
}

.typewriter h1 {
  overflow: hidden;
  border-right: .15em solid black;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:
    typing 3.5s steps(30, end),
    blink .75s step-end 0s infinite,
    end 3s 3.5s forwards; 
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink {

  0%,
  100% {
    border-color: black;
  }

  50% {
    border-color: transparent;
  }
}

@keyframes end {
  to {
    border-right: 0 solid transparent; 
  }
}

<div class="typewriter">
  <h1>Lorem Ipsum</h1>
</div>

This snippet shows the addition of end. Upon reaching 3 seconds (this duration can be adjusted), the color of border-right changes to transparent.

Answer 2

Another option is to include an additional keyframe.

.typewriter {
  display: inline-block;
}

.typewriter h1 {
  overflow: hidden;
  border-right: .15em solid black;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:
    typing 3.5s steps(30, end),
    blink .75s step-end 0s infinite,
    end 3s 3.5s forwards; 
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink {

  0%,
  100% {
    border-color: black;
  }

  50% {
    border-color: transparent;
  }
}

@keyframes end {
  to {
    border-right: 0 solid transparent; 
  }
}

<div class="typewriter">
  <h1>Lorem Ipsum</h1>
</div>

This snippet shows the addition of end. Upon reaching 3 seconds (this duration can be adjusted), the color of border-right changes to transparent.

Is there a way to hide the blinking cursor at the conclusion of the animation after 3 seconds?

Answer №1

Similar questions

Styling used on the ofx.com website

Tips on eliminating the gap between two flex items while adjusting their size

Steps for modifying material-ui timepicker to display time in a 24-hour format

Safari browser is experiencing issues with CSS positioning

an li element is accompanied by a visible box

Javascript editing enhancement for real-time changes

What is the best way to keep fixed input at the bottom of the page?

The content contained within the .each loop within the click event is only executed a single time

"Utilize Python's Selenium library to automate clicking the 'Get Data

Incorporate different courses tailored to the specific job role

What is the process for modifying a Joomla plugin?

Achieving text-overflow: ellipsis functionality with mandatory content following

Tips for handling CSS loading delays with icons in OpenLayers markers

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

How can I position divs in a way that the top right corner of the child div touches the bottom left corner

Trouble encountered while creating a table with the Bootstrap grid system

Adjust the size of the iframe image to fit seamlessly within the design

Change an ASP page into an image format such as JPEG or PNG

Revamp the website's design

Background image that covers the entire page