Text Typing Animation Effect Using HTML/CSS

Categories: CSS / HTML

Learn to create CSS typing animation or typewriter effect.
you can also called it text typing animation or text typewriter animation effect.

This is a small project for beginner who wants to practice small animation effect using HTML CSS. I have also added a ‘Type’ button on which JavaScript basic code is applied for restarting animation without refreshing page.

You can also loop this animation by changing small piece of code.

Type button and its JS are optional.

By learning this CSS animation you will realize the power of CSS. 

HTML Code

Create H1 tag and write the text you want to display. Inside the text, please use span in which we are going to put our typing animation text.

Below is HTML file Code.

<body>
	<h1>Please 
    	<span class="type animation">Subscribe</span> 
    	Acodeakash
	</h1>
	<button>Type</button>
</body>

CSS Code

Below is CSS file Code. 

body {
  display: grid;
  place-items: center;
  min-height: 70vh;
  background-color: #e8eae6;
  color: #e8eae6;
  font-family: Rosario, sans-serif;
}
h1 {
  font-size: 4.5rem;
  text-align: center;
  color: #d35d6e;
}
.type {
  display: inline-flex;
  width: 0;
  overflow: hidden;
  padding-right: 0.08em;
  position: relative;
}
.type:after {
  content: "";
  background: #e8eae6;
  position: absolute;
  right: 0;
  top: -0.05em;
  bottom: -0.05em;
  width: 0.08em;
  border-right: 4px solid #e8eae6;
}
.type.animation {
  -webkit-animation: type 1620ms;
          animation: type 1620ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
          color: #ec4646;
}
.type.animation:after {
  -webkit-animation: cursor 320ms 8.625 ease-in-out;
          animation: cursor 320ms 8.625 ease-in-out;
}
@-webkit-keyframes cursor {
  0%, 100% {
    border-color: #ec4646;
  }
  50% {
    border-color: #e8eae6;
  }
  100% {
    width: 0;
  }
}
@keyframes cursor {
  0%, 100% {
    border-color: #ec4646;
  }
  50% {
    border-color: #e8eae6;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes type {
  11.1111111111% {
    width: 0.49em;
  }
  22.2222222222% {
    width: 0.98em;
  }
  33.3333333333% {
    width: 1.47em;
  }
  44.4444444444% {
    width: 1.96em;
  }
  55.5555555556% {
    width: 2.45em;
  }
  66.6666666667% {
    width: 2.94em;
  }
  77.7777777778% {
    width: 3.43em;
  }
  88.8888888889% {
    width: 3.92em;
  }
  100% {
    width: 3.92em;
    padding-right: 0;
  }
}
@keyframes type {
  11.1111111111% {
    width: 0.49em;
  }
  22.2222222222% {
    width: 0.98em;
  }
  33.3333333333% {
    width: 1.47em;
  }
  44.4444444444% {
    width: 1.96em;
  }
  55.5555555556% {
    width: 2.45em;
  }
  66.6666666667% {
    width: 2.94em;
  }
  77.7777777778% {
    width: 3.43em;
  }
  88.8888888889% {
    width: 3.92em;
  }
  100% {
    width: 4.92em;
    padding-right: 0;
  }
}
button {
  padding: 1rem;
  background: transparent;
  border-radius: 4px;
  border: 2px solid #045762;
  cursor: pointer;
  font-weight: bold;
  font-size: 40px;
  color: #045762;
}
button:hover, button:focus {
  outline: none;
}

JavaScript Code (Optional – ‘Type’ Button)

const button = document.querySelector("button");
const word = document.querySelector("h1 span");

// reset the transition by...
button.addEventListener(
	"click",
	function (e) {
		e.preventDefault;

		// -> removing the class
		word.classList.remove("animation");

		// -> triggering reflow /* The actual magic */
		void word.offsetWidth;

		// -> and re-adding the class
		word.classList.add("animation");
	},
	false
);

Text Typing Animation Effect Using HTML CSS​

Search Your Keywords
Recent Post
Post Categories