Typing Text Effects In Css?

Ask a question+

How i can typing effect on text in CSS?

Ayub Shah 0
add comment

3 Answers


Typewriter Effect

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }

You can read more about Typewriter Text here: https://www.w3docs.com/snippets/css/how-to-create-a-typewriter-text-with-only-css.html

Gohar Ghukasyan 150
add comment

1.Create an HTML file called index.html in a folder which is the one you are trying to create typewriter effect.
2.Open it with any text editor and put this code.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <h1>Hallo, Wij zijn Occhio!</h1>

3.Then in the folder which you created index.html file create a new CSS file called styles.css , too.
4.open it with any code editor and inside of the file write this code.


body {
  background-color: #FF5A5A;
  height: 100%;
  font-family: 'tradegothiclt-bold', sans-serif;

h1 {
  font-size: 5em;
  color: white;
  text-transform: uppercase;

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;

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

So we will continue writing code….
5.So, create a new file called main.js and open it with any editor you want.
6.Paste the below code into the created file.

  // array with texts to type in typewriter
  var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];

  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
        }, 20000);
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
  // start the text animation

Finally, the code is ready! But we have to include jquery to use our typewriter correctly.
7.Include the following tag with its source url inside of index.html file before the closing tag of body tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />

And this is one of the simplest way to create typewriter effect. Happy coding! Have fun!

[email protected] 0
add comment

Follow the steps

  1. .Add HTML

    <div class="typewriter">
    <h1>Once upon a time.</h1>
  2. Add the Style

    .typewriter h1{
    font-family: monospace;
    letter-spacing: .17em;
  3. Add the Animation
    @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  4. Apply the Animations
    .typewriter h1 {
    animation: typing 3.5s steps(40, end);
    Source: https://www.w3docs.com/snippets/css/how-to-create-a-typewriter-text-with-only-css.html
    try more example : https://www.w3docs.com/tools/code-editor/5974
[email protected] 30
add comment

Your Answer