- 🎬CSS Text Typing Animation | HTML & CSS
- 11 CSS Typing Text Effects
- Author
- Links
- Made with
- About a code
- CSS-only Typewriter Text Animation
- Author
- Links
- Made with
- About a code
- CSS Typing Effect
- Author
- Links
- Made with
- About a code
- Pure CSS Typing Animation
- Author
- Links
- Made with
- About a code
- Gradient Typing Effect in CSS
- Author
- Links
- Made with
- About a code
- SCSS-powered Animated Text
- Author
- Links
- Made with
- About a code
- Editor Illustration
- Author
- Links
- Made with
- About a code
- CSS Typewriter Animation
- Author
- Links
- Made with
- About a code
- Text Slider with Typing Animation in Pure CSS
- Author
- Links
- Made with
- About a code
- CSS Typing Animation
- Author
- Links
- Made with
- About a code
- Auto Type CSS
- Author
- Links
- Made with
- About a code
- Typing Text Animation
- Typewriter Effect
- Comments
- 12 Creative CSS and JavaScript Text Typing Animations
- 1. A Simple Typing Effect with Blinking Cursor
- 2. Style the Cursor
- 3. Typing Effect Without Cursor
- 4. Smooth Typing Effect with Blinking Cursor
- 5. Text Moving to Left
- 6. A Typing Effect with Center Aligned Text
- 7. Multiline Typewriter Effect
- 8. Another Multiline Typewriter Effect
- 9. Erasing Typos
- 10. Simple Typing Carousel
- 11. Typing and Deleting Multiline Effect
- 12. Making It User Interactive
- Conclusion
🎬CSS Text Typing Animation | HTML & CSS
In todays tutorial you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation.
Basically, this animation is created using JavaScript or jQuery library, but today I’ll show you how you can create this text typing animation using only HTML & CSS. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); * margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif; > body min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #082032; > .wrapper display: flex; > .wrapper .static-txt color: #fff; font-size: 60px; font-weight: 400; > .wrapper .dynamic-txts margin-left: 15px; line-height: 90px; height: 90px; overflow: hidden; > .dynamic-txts li list-style: none; color: #ff4c29; font-size: 60px; font-weight: 500; top: 0; position: relative; animation: slide 12s steps(4) infinite; > @keyframes slide 100% top: -360px; > > .dynamic-txts li position: relative; > .dynamic-txts li::after content: ""; position: absolute; left: 0; height: 100%; width: 100%; background-color: #082032; border-left: 2px solid #ff4c29; animation: typing 3s steps(10) infinite; > @keyframes typing 40%, 60% left: calc(100% + 30px); > 100% left: 0; > >
11 CSS Typing Text Effects
Collection of hand-picked free HTML and pure CSS typing text effect code examples from Codepen, GitHub and other resources. Update of January 2022 collection. 1 new item.
Author
Links
Made with
About a code
CSS-only Typewriter Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Typing Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Typing Animation
With the use of keyframe animations and a couple of (forgivable) magic numbers, we can create a pure CSS typing animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Gradient Typing Effect in CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
SCSS-powered Animated Text
No H(TML)andlebars. or JS Typed.js ported entirely to CSS (SCSS).
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Editor Illustration
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Typewriter Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Slider with Typing Animation in Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Typing Animation
Typing animation with CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Auto Type CSS
Auto type text with only CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Typing Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Typewriter Effect
Some use JavaScript, which may sometimes be preferable (literally adding a character at a time feels more like a real typewriter) and sometimes not be (potential accessibility concerns).
Came across this SCSS @mixin from Brandon McConnell with powerful options that can identify multiple strings, speed, caret configurations, pauses, and all kinds of other things.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Very clever way to do this with pure CSS. I actually wrote a jQuery plugin a while back (http://macarthur.me/typeit) that does this same thing with a few more features for customization, but it’s obviously dependent on jQuery. I might pull a few tips from your JS examples if I ever want to make a vanilla JS version — particularly the CSS injection idea. Some of it relies on jQuery to do what CSS animations could do natively, and I’d like to see that changed.
Sorry, I moved the site to a dedicated URL and it looks like the redirect was down for a while. The new location is https://typeitjs.com, but that redirect should also be working now.
// Love dynamically typed text? You’re gonna love this
// Edit these strings to see them typed on the screen:
$strings: (
“CSS typed this string!”
“It typed this one too ”
“Enjoy ☕”
); // now for some timing (all in seconds)
$durCharFwd: 0.10; // character typed
$durFullGap: 5.00; // time between typed/delete
$durCharBwd: 0.08; // character deleted
$durDoneGap: 5.20; // time between strings // initializing some variables and functions ✊
$charCount: 0; $durTotal: 0;
@each $string in $strings $charCount: $charCount + str-length($string);
$durTotal: $durTotal
+ (str-length($string) * ($durCharFwd + $durCharBwd))
+ $durFullGap + $durDoneGap;
>
@function percent($string, $letter) $stringsPast: $string – 1; $time: 0;
@while $stringsPast > 0 $time: $time
+ (($durCharFwd + $durCharBwd) * (str-length(nth($strings, $stringsPast))))
+ $durFullGap + $durDoneGap;
$stringsPast: $stringsPast – 1;
>
@if $letter <= str-length(nth($strings, $string)) $time: $time
+ ($durCharFwd * ($letter – 1));
> @else $time: $time
+ ($durCharFwd * str-length(nth($strings, $string)))
+ $durFullGap
+ ($durCharBwd * ($letter – str-length(nth($strings, $string))));
>
@return $time / $durTotal * 100 + “%”;
>
$currentPercentage: 0;
// now THIS is where the magic happens… ✨
@keyframes typed @for $i from 1 through length($strings) // @for $j from 1 through (str-length(nth($strings, $i)) * 2 – 1) @for $j from 1 through (str-length(nth($strings, $i)) * 2) /* string #, char # */
@if $j < str-length(nth($strings, $i)) * 2 < // not last character deleted
#
> @else content: quote(#
>
>
> @else @if $i < length($strings) < // not last string
#
>
> @else < // last string
#
>
>
>
>
>
>
@keyframes beam-blink 75% < border-color: transparent; >
>
* < backface-visibility: hidden; >
html, body < height: 100%; >
body display: flex;
align-items: center;
justify-content: center;
background-color: #000;
background-image: // skeuomorphism anyone?
radial-gradient(rgba(#fff, 0.125), rgba(#fff, 0)),
linear-gradient(to bottom, #000, #000 2px, #111 3px);
background-repeat: repeat-y;
background-position: center center;
background-size: cover, 100% 3px;
font-size: calc(10px + 2vw);
font-family: ‘VT323’, monospace, sans-serif;
color: #3f3; // hacker green
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&::after content: “”; // zero-width space to retain element height when empty
position: relative;
top: -13px;
@media (max-width: 575px) < top: -33px; >
display: inline-block;
padding-right: 3px;
padding-right: calc(3px + 0.1vw);
border-right: 10px solid rgba(#3f3, 0.75);
border-right: calc(1.1vw + 4px) solid rgba(#3f3, 0.75);
text-shadow: 0 0 5px rgba(51, 255, 51, 0.75);
white-space: nowrap;
animation: typed # linear 1s infinite, beam-blink 1s infinite;
>
&::before < // just generating some useful stats here
content: “# strings / # chars / #s duration”;
@media (max-width: 575px) content: “# strings \A # chars \A #s duration”;
>
display: block;
position: absolute;
bottom: 0;
width: 100%;
padding: 3px 0;
background: #00f; // aquaman blue
color: #fff; // Brandon-McConnell white
text-align: center;
font-size: 18px;
letter-spacing: 0.7px;
white-space: pre-wrap;
>
>
Love the CSS-only version! Ingenius. I too created a typing library – with no jquery (or any other) dependency – https://github.com/qodesmith/typer There is a link to a demo on the abive github page. It has a robust api that offers a lot of natural “typing” use-cases: back, continue, etc. I hope you guys find it useful!
Very cool trick! I’m working on a personal project right now and trying to accomplish a similar functionality to this (like typed.js) dynamically using only CSS/SCSS via ::before/::after and the content property. Because the property isn’t animatable, it will automatically reveal each character without having to do any width or overflow changes and hiding/showing text. I have a few keyframe bugs I’m working through now but it’s pretty close. Check it out:
Thanks so much for this, I have on problem. I build alot of websites for clients using squarespace and for some reason when implementing this after typing whats in HTML, the cursor keeps on going. Someone care to help me out?
Hey Brandon! The CSS snippet relies on a fine balance between the length of the content and the number of steps in the animation. If you’re finding that the cursor continues past the container, then try adjusting the number of steps in the animation so that is corresponds with the length of the content using the effect.
12 Creative CSS and JavaScript Text Typing Animations
Adding a little animation to a website can make it eye-popping. There are various ways you can create animations, one of which is adding a typing effect to your text. Typewriter text animations are quick to implement and can do wonders for your website by making it look exceptionally impressive.
12 handpicked typing text animations are shown below along with their source code. A bit of knowledge of CSS and JavaScript is all you need to learn to use these animations. You can go to this post which explains step-wise creation of a typewriter effect.
To begin with, some simple typing animations created using pure CSS are shown which can give an elegant look to your text and website as a whole.
1. A Simple Typing Effect with Blinking Cursor
This is a simple yet beautiful typewriter effect created using CSS animation. It uses Source Code Pro as a font base to give it the effect of typewriter. Its code is explained in the post — Creating Typewriter Text Animation using CSS.
2. Style the Cursor
This animation uses a horizontal blinking cursor having the width of the characters of the text. Simply changing the cursor shape can give your animation a different look. You can try using other types and shapes of cursors as well.
3. Typing Effect Without Cursor
This animation shows typewriter effect without cursor. This is achieved by removing the right border of the paragraph containing the text.
4. Smooth Typing Effect with Blinking Cursor
In the previous demos, the steps( ) function was given as value to the animation-timing-function property. It showed the typing animation in steps in which each step displayed a character.
To make this animation smooth, the linear( ) function is used in place of the steps( ) function in this demo.
5. Text Moving to Left
This type of animation is another way to make your typing effect look cool. It is achieved by positioning the paragraph containing the text to the right.
6. A Typing Effect with Center Aligned Text
This effect is achieved by horizontally center aligning the paragraph containing the text.
The animations shown above are created using just CSS. The next two animations show typewriter effect for multiline text.
7. Multiline Typewriter Effect
Typing effect can be extended to multiple lines of text as well. This demo displays the different lines of code in a pre tag as if they are being typed.
8. Another Multiline Typewriter Effect
This demo shows typewriter effect for multiple text lines of a paragraph without displaying cursor.
Another trending typing effect is erasing the typed text and typing some other text in place of it. Few such animations are shown below.
9. Erasing Typos
This is a very cool effect created using only CSS, which makes it appear as if someone is typing the text and erasing the letters typed by mistake.
10. Simple Typing Carousel
This is a pretty popular text animation technique. It is sometimes used by websites to showcase their products range, services offered or to list other such descriptions.
The animation uses a combination of CSS and JavaScript to rotate text snippets as if they were being typed. This effect improves readability because it displays only one item at a time on the screen.
11. Typing and Deleting Multiline Effect
If you want to type and delete multiline text, then this demo is for you. It’s a fun effect which you can use on your homepage in place of displaying a lot of lines of text.
12. Making It User Interactive
Lastly, we have this demo which allows the user to type text and erase it as if it is being typed and erased on a text editor. There are separate buttons for the two operations. This effect can be used in a lot of applications, like making the user choose from a list of questions and erasing the selected question when he submits an answer to it.
Conclusion
So, this was a list of some cool typewriter animation effects created using only CSS and JavaScript. There is a lot which can be done with typography to create impressive effects. You can come up with a new one using some permutations and combinations. Hopefully, one of these will be making your homepage look more awesome.