Typewriter Animation in CSS

Подписаться 2 тыс.

Просмотров 124 тыс.

50% 1

No Javascript - Just pure HTML & CSS. Here's how to create a typewriter effect for websites.
You'll find 2 different typing animation styles. One like typing and step by step and one pretty smooth and fluid.
Here's where I s̶t̶o̶l̶e̶ inspired this from
codepen.io/den...
css-tricks.com...
#css #html #typewriter

Опубликовано:

11 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 79

@ryanpatel2001 Год назад

Brilliant. Simple, and straight to the point. Thanks

@aronbarbosag3439 Год назад

bro, i'm not english speaker, but your video is the only one that i really learn how to do this effect. sorry for my bad english. good job bro ! keep going the job

@victormarinviloria633 Год назад

This is such a creative way to do it! Thanks for sharing!

@CrazyTajdine 4 месяца назад

this like is for the cat and this heart

@sihxies2037 Год назад

Simple, Straightforward and easy to understand, Thankss for the info. Btw I liked, how's the cat

@cluelessexpert Год назад

he got the finest tuna available on amazon , thx for asking

@sirphiriladki5531 3 месяца назад

That last line is amazing😂

@SeriousSnake 9 месяцев назад

Terrific! I could not get the typing bar, but that is what I wanted. Thanks for the video!

@joeyreyes9666 6 месяцев назад

Beautiful and way easier than I thought. Thank you! :)

@pramana47 5 месяцев назад

this works like a charm, thx man!

@nikhilgupta6415 5 месяцев назад

Brilliant. Simple and easily done.

@jotanews1776 Год назад

top-tier content, really glad i found this gem.

@ujjjdgabehdy6147 5 месяцев назад

thanks! thats exacly what i was looking for! very simple

@sebastian9192 Год назад

hello, what about if text wraps and you have more lines of text??

@AlanDanielx 10 месяцев назад

he just made a one line solution lol

@ci2179 4 месяца назад

Nowrap is not put, cursor denotes as border right 5 px assign while minimize ur screen... Border puts entire line... Nowrap necessary for this animation

@shehiriron69 Год назад

Why doesn't the animation work?

@harrisonofordu4222 26 дней назад

brilliant

@yordanov5.0 3 месяца назад

Brotha you are legend.

@karimahmed2510 9 месяцев назад

how to make it write 3 words without js ??

@chrisambatti 7 месяцев назад

What a cool way to teach

@tommytanti1776 Год назад

How to loop it?

@user-fn4sz9nj4k 4 месяца назад

amm.. why does the cursor goes to the right side side of the screen??

@SL_Web_Hero 8 месяцев назад

cool,but I can,t center this animated text.

@user14NotFound 8 месяцев назад

how to make an animation of typing and deleting, then there is writing. example type: my hobby is fishing. and deleting fishing. then add to it playing football. like that, if you can please make it

@jonteel0 7 месяцев назад

.typing-animation::after { content: ''; animation: typing 5s steps(40) forwards, deleting 2s steps(40) 5s forwards; overflow: hidden; display: inline-block; vertical-align: bottom; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes deleting { from { width: 100%; } to { width: 0; } } document.addEventListener('DOMContentLoaded', function () { var div = document.querySelector('.typing-animation'); var newText = 'playing football.'; setTimeout(function () { div.setAttribute('data-text', newText); div.style.animation = 'typing 5s steps(40) forwards'; }, 7000); // Adjust the timing according to your need });

@ArbiSalah-nt8fv 8 дней назад

I have problème with key frames typing

@muhammadumarsotvoldiev8768 8 месяцев назад

Thank you very much!

@prerit714 Год назад

You asked like? Imma give you a wholeass subscribe

@coding-id6dh 7 месяцев назад

i am doing the same way. but it's not working!

@iamadriansantos 3 месяца назад

thank you!

@JoshDaniel7 3 месяца назад

Any idea how to make this responsive after the animation?

@RIP123 Год назад

Cool but is it possible to make it responsive?

@JawadKhan-ky6yt Год назад

Liked for your cat.

@PatrikRasch 11 месяцев назад

Lmao wish I could donate 1000 likes to feed that stronk cat

@Owen-by7db 9 месяцев назад

I love your video

@ci2179 4 месяца назад

Its not working for me... What mistakes i made i dont know

@stavroskefaleas6320 8 месяцев назад

Is there any way I can convert this to an animated gif?

@bakardembadia4361 8 месяцев назад

how do i make it work with a paragraph ? I thought about having each line separated and copy past the css for each of them but idk how to delay the animation for each line so they do not happen at the same time

@nokky070 6 месяцев назад

Ehhh it isn't perfect but what i done is i removed the white-space in the css

@nathanbrown2625 4 месяца назад

is there a way to remove the cursor after it completes going over the intended text?

@smashbrick 4 месяца назад

Did you figure this out?

@kimuthgemink 10 месяцев назад

kalau dibuat looping tapi delay dulu bisa ga mas? caranya gimana?

@vlad7951 2 месяца назад

Hope your cat is well

@bw0ns4mdi35 Год назад

When I put the steps part, the animation doesn't work. I rmeove the steps and it does work. But I'd really like to make the steps animation. What would be the problem?

@cluelessexpert Год назад

can you elaborate that more? Maybe you misspelled the animation names or something with the width

@bw0ns4mdi35 Год назад

@@cluelessexpert I already fixed it. Thanks!!

@andro5283 5 месяцев назад

how did you achieve the fix for this? @@bw0ns4mdi35

@chameleonnn Год назад

wow so simple

@emni-tech Год назад

redid everything like you did in the video, the animation doesn't happen at all :(

@cluelessexpert Год назад

can you give more details my g, maybe we'll solve it

@javierserna6631 Год назад

good video, but not working infinite property, thanks

@adriankarlosiangco Год назад

bro, is there a way to put a delay like 4s then loop again from the start?

@cluelessexpert Год назад

I asked the Bing AI and it gave me this and it seems to work. just replace this for everything after line 11 animation: typing 6s steps(15, end) infinite, cursor .4s step-end infinite alternate; } /* cursor blinking */ @keyframes cursor { 50% { border-color: transparent } } /* typing effect */ @keyframes typing { 0% { width: 0 } 33.33% { width: 100% } /* typing ends */ 100% { width: 100% } /* pause for remaining time (4s) */ }

@adriankarlosiangco Год назад

@@cluelessexpert thanks bro its working now =)

@slach9056 Год назад

do you guys have any idea about how can i turn this animation into a hover? .giroscopio{ width:100%; white-space: nowrap; overflow: hidden; border-right: solid 2px; animation: typing 2s steps(18), cursor .4s step-end infinite alternate; } @keyframes cursor { 50% {border-color:transparent} } @keyframes typing { from { width:0 } } i want to add something like: father-element:hover .giroscopio {execute the animation}

@Kk-ql8rz 7 месяцев назад

just put the animation property in hover state

@nielanthonyflores1714 Год назад

How about changing text after typing

@cluelessexpert Год назад

if you don't mind using scss try maybe try this codepen.io/geoffgraham/pen/MWVmxQp

@dr.manthanos7781 Год назад

is it any way to do this without the typing bar?

@cluelessexpert Год назад

You mean the line on the right side?

@dr.manthanos7781 Год назад

@@cluelessexpert yeah, i mean that bar that acts like a cursor while typing

@cluelessexpert Год назад

Yeah, just don’t add it or make the color transparent

@Techno_2709 11 месяцев назад

source code pls

@MTHOVTER 5 месяцев назад

Para los que quieran mejorarlo y poder crear textos de diferentes tamaños sin perder el efecto: - En tu codigo CSS escribe: :root { --typing-steps: 0; } - Modifica dentro de .text{}: .text{ animation: typing 2s steps(var(--typing-steps)), cursor .4s step-end infinite alternate; } - Por ejemplo, dentro de tu index.html puedes crear diferentes textos usando: Hola Hola gente :D Obviamente el numero de pasos debe ser el equivalente al numero de caracteres que tiene la oración (Contando caracteres en blanco)

@AnuragSingh-nx4ct 11 месяцев назад

Only print one line

@rohanrajput_9 Год назад

I did one comment too, feed your cat

@Technical_yaar Год назад

I didn't get it can anybody explain?

@aintxsocial 7 месяцев назад

Get gud

@Nova_BG 5 месяцев назад

Just copy🤐

@damonwu9658 Год назад

This is a styled-components version: const cursor = keyframes` 50% { border-color: transparent; } `; const typing = keyframes` from { width: 0; } `; const typeWriterAnimation = (props) => css` ${typing} 4s steps(${props.steps}), ${cursor} 4s step-end infinite alternate; `; const TypeWriterWrapper = styled.p` font-size: 1rem; letter-spacing: 0.05rem; font-family: monospace; border-right: 6px solid; width: 100%; white-space: nowrap; overflow: hidden; animation: ${typeWriterAnimation}; `;