Work Amazingly
  • Apps
  • Finance
  • Govt. Jobs
  • Jobs
  • News
  • Shop
  • SEO
  • Tools
    • Free Domain Checker Online
    • Free Youtube To mp3 Converter
  • What’s New
  • WordPress
Work Amazingly
  • Apps
  • Finance
  • Govt. Jobs
  • Jobs
  • News
  • Shop
  • SEO
  • Tools
    • Free Domain Checker Online
    • Free Youtube To mp3 Converter
  • What’s New
  • WordPress
Advertise With Us
  • Apps
  • Finance
  • Govt. Jobs
  • Jobs
  • News
  • Shop
  • SEO
  • Tools
    • Free Domain Checker Online
    • Free Youtube To mp3 Converter
  • What’s New
  • WordPress
Work Amazingly
  • Apps
  • Finance
  • Govt. Jobs
  • Jobs
  • News
  • Shop
  • SEO
  • Tools
    • Free Domain Checker Online
    • Free Youtube To mp3 Converter
  • What’s New
  • WordPress
How to Create a CSS Typewriter Effect For Your Website

A CSS typewriter effect is a cool visual effect that can make your website stand out. It gives the illusion that text is being typed out, one character at a time, as if by an old-fashioned typewriter. In this tutorial, we’ll show you how to create a CSS typewriter effect for your website.

Step 1: Create HTML Markup To create the typewriter effect, we first need to create the HTML markup. In this example, we’ll create a simple paragraph with some text. Here’s an example:

<p class="typewriter-text">This is some text that will be animated.</p>

Step 2: Add CSS Styling Next, we’ll add some CSS styling to create the typewriter effect. Here’s the CSS code:

.typewriter-text {
  display: inline-block;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typewriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  letter-spacing: .15em; /* Adjust as needed */
  animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}

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

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

Let’s break down what’s happening in the CSS code.

First, we set the display property to inline-block to ensure that the typewriter effect only affects the text inside the paragraph tag. We also set the overflow property to hidden to ensure that the content is not revealed until the animation starts.

Next, we add a border-right property to create the typewriter cursor effect. The border-right property creates a vertical line on the right side of the text, which looks like a blinking cursor.

We also set the white-space property to nowrap to ensure that the text stays on a single line. Finally, we set the letter-spacing property to .15em to create a small gap between each character.

In the @keyframes section, we define the two animations. The typing animation uses the from and to properties to create the effect of the text being typed out. The steps() function divides the animation into 30 steps, with the end keyword ensuring that the animation finishes with the full text displayed.

The blink-caret animation uses the from, to, and 50% properties to create the effect of the cursor blinking on and off.

Step 3: Add the Animation to the HTML Markup To add the animation to the HTML markup, we simply add the class name we created earlier to the paragraph tag, like this:

<p class="typewriter-text">This is some text that will be animated.</p>

Step 4: Adjust the Timing and Spacing You can adjust the timing and spacing of the typewriter effect by adjusting the animation-duration and letter-spacing properties. For example, if you want the animation to be slower, you can increase the animation-duration property. If you want more space between each character, you can increase the letter-spacing property.

That’s it! With just a few lines of CSS, you can create a cool typewriter effect for your website.

Share:

Work Amazingly

A passionate web designer & developer. I love to write about new technology and web design related articles.

5 Secrets Of Building A SEO-optimized Website April 5, 2023
What Is Cache? Why We Use It In... April 5, 2023

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Search



Latest News

  • 5 free WordPress themes for blogging in 2023 which are fast and SEO friendly
    5 free WordPress themes for blogging…
    September 23, 2023
  • Internet’s ‘Kulhad Pizza’ pair makes an appeal for support in the face of a contentious video
    Internet’s ‘Kulhad Pizza’ pair makes an…
    September 23, 2023
  • Launch of the Realme GT 5: 240W quick charging provides two hours of talk time in just 30 seconds!
    Launch of the Realme GT 5:…
    August 23, 2023
  • Big discounts on the iPhone 14 Plus, iPhone 14, iPhone 13, iPhone 12, and more are available during Apple’s mega Flipkart sale.
    Big discounts on the iPhone 14…
    August 23, 2023
img4



Categories

  • Affiliate Marketing (1)
  • Android (2)
  • Apple (1)
  • Apps (3)
  • Artificial Intelligence (2)
  • Career (2)
  • CodeIgniter (1)
  • CSS (2)
  • Design (9)
  • Finance (17)
  • Freelance (3)
  • Govt. Jobs (5)
  • Hosting (1)
  • HTML (4)
  • Instagram (1)
  • ipl (3)
  • Jobs (3)
  • jQuery (1)
  • Maharashtra (1)
  • Marketing (6)
  • Mobiles (1)
  • News (5)
  • Online Learning (5)
  • PHP (1)
  • Sass Landing (5)
  • SEO (3)
  • Shop (3)
  • Story (1)
  • Tools (2)
  • Top 5 (3)
  • UI/UX (4)
  • What's New (1)
  • Wordpress (16)

Popular Tags

.mp3 2023 AI Android Apple Apps Budgeting Design Designing Facebook FD Fixed Deposite Freelancer Freelancing Govt. Jobs HTML Instagram Investing iPhone 13 ipl Javascript Jobs Maharashtra Marketing Meta Mobile Money new rule of ration NFDC Online Online Earning Online Learning Passive Income Punjab ration card holders Salary SEO Story Themes UIDAI Free Service Update your Aadhaar card Wages Websites WORDPRESS Work From Home



Want to write an article?

Send us a message and we’ll get in touch with you as soon as possible.

Let’s Get Started
logo

Web Design | Development | Technology | Affiliate Marketing | Digital Marketing | Online Learning | Online Earning Blog | Artificial Intelligence | Programming | Latest Jobs | Govt. Jobs | Wordpress

Quick Links

  • Affiliate Marketing
  • Artificial Intelligence
  • Design
  • Govt. Jobs
  • Finance
  • Wordpress
  • About
  • Cookies Policy
  • Privacy Policy
  • Terms & Conditions
  • Contact

Contact

workamazingly@gmail.com

help@workamazingly.com

Facebook-f Linkedin-in

© Work Amazingly. All Rights Reserved.