Create a Typewriter CSS Text Animation (Typing Effect)

Create a Typewriter CSS Text Animation (Typing Effect)

Create a Typewriter CSS Text Animation (Typing Effect). We will go through the steps of creating a typewriter Text Animation in Pure CSS and HTML no javascript will be included. Sometimes you would like to have a nice and cool text animation like a typewriter text animation which makes it looks like a hacker type of things. You can include this type of animation in your portfolio to show off or even on your business landing page. It just makes it looks elegant.

Overview

Sometimes you would like to have a nice and cool text animation like a typewriter text animation which makes it looks like a hacker type of things. You can include this type of animation in your portfolio to show off or even on your business landing page. It just makes it looks elegant.

So we will go through the steps of creating a typewriter Text Animation in Pure CSS and HTML no javascript will be included.

Text Animation

So we will try to create the text Animation in Pure CSS.

You can take a look at the Sandbox.

We simply making the Html and Body tags takes the full width and height. And a Dark background to make it look perfect.

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Anonymous Pro", sans-serif;
  background-color: #111518;
}

The text container will have a special font to make it look more like a typewriter animation.

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

The Anonymous Pro font will do the job.

For the text that needs to apply the animation we can use a div or either p as a container for the text I would prefer a div cause it gives you much better control over the style.

.typewriter-text {
  overflow: hidden;
  position: relative;
  width: 18em;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  font-size: 38px;
  white-space: nowrap;

  animation: typewriter 4s steps(44) 1s 1 normal both,
  blinkTextCursor 400ms steps(44) infinite normal;
}

Make sure to make the overflow hidden to hide anything outside it's bounding box so we won't have the text showing outside it's bounding box.

The white-space no-wrap allows us to display the text in a single line even though it's parent container doesn't fit so we could easily apply the typewriter animation.

we also create a white semi-transparent border-right for the blinking cursor effect.

Finally, we apply the intended animation in this case we need two animations to make it look like a typing text animation.

  • Typewriter animation: allows us to move from a completely hidden text to show each character step by step.
  • Blink Text Cursor: it makes the cursor blinks when typing, this makes it even more realistic of a typing animation.
@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 18em;
  }
}

@keyframes blinkTextCursor {

  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }

  to {
    border-right-color: transparent;
  }

}

For the typewriter keyframes, we move from 0 widths which means the text is going to be completely hidden then it starts showing till it reaches the text full-width 18em. Well this depends on the length of your text so adjust the width value to match your text

s length to make the animation perfect.

For the blinkTextCursor keyframes, we show it at first as completely white and then completely hide it that's how it plays the blinking cursor just by tweaking the border-right property.

The most important part is using steps function as an animation-timing-function which allows us to create several intervals for the animation each interval plays separately that's how we can create the typing effect.

Read more about animation-timing-function and steps function at Mozilla Developer.

Lastly, we apply the animation to the text container using the shorthand animation property cause in this case we need to apply two animations at the time to the same element.

.typewriter-text {
  ...
  animation: typewriter 4s steps(44) 1s 1 normal both,
  blinkTextCursor 400ms steps(44) infinite normal;
}

The shorthand animation property has the same meaning as the following properties in-order:

  • animation-name: Specifies the name of the @keyframes animation
  • animation-duration: Specifies how long time an animation should take to complete one cycle
  • animation-timing-function: Specifies the speed curve of the animation
  • animation-delay: Specifies a delay for the start of an animation
  • animation-iteration-count: Specifies the number of times an animation should be played
  • animation-direction: Specifies whether an animation should be played forwards, backwards or in alternate cycles
  • animation-fill-mode: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
  • animation-play-state: Specifies whether the animation is running or paused

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

Welcome to Introduction To HTML & CSS: Web Development For Beginners: This is a comprehensive and Practical guide that is designed to pick up every interested student from the state of "zero-knowledge" to a state of "Hero-knowledge" in HTML and CSS. As a senior software developer and an instructor with many years of experience in the industry, I have mastered the best way to give my students packages that will help them to learn and understand HTML and CSS in one course.

What you'll learn

  • You will learn the basics of web development
  • You will be able to use the HTML tags professionally
  • You will learn how to work with images in HTML and CSS
  • You will learn how to create awesome backgrounds
  • You will how to use CSS colors
  • You will master most web development documentations used by professionals
  • You will learn how to embed multimedia in web pages
  • You will learn how to make comments in both HTML and CSS
  • You will learn the Box Model

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

If you want to create your own website or want to become a web developer, you are in the right place. This course, you are going to learn about html language which is the most important skill you must know in web developer career.

In addition, html is used to create website skeleton, to make them look nice, you must apply CSS style to them. With the latest technology, you will be able to make a web-page layout and structure according to what you want or what your client want.

Honestly, There are many courses available on the internet include free and fee. how ever, most of them are really hard to follow along. That is the reason that I create this web development course on Udemy which is easier to understand. Do you want to spend a month to learn or just spend less time but get the concept and have ability to develop a website? When you know its concept, you will no longer need any teacher. I mean you can learn and research more by yourself.

What you'll learn

  • Make a web applications using HTML5 and CSS3
  • Create a blog from stretch
  • Understand and have skill how website work
  • Be a comfortable front-end developer

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Hire Now: https://bit.ly/394wdOx