Typewriter Animation in CSS
Vložit
- čas přidán 18. 07. 2022
- 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/denic/pen/GRoOxbM
css-tricks.com/snippets/css/t...
#css #html #typewriter - Jak na to + styl
Brilliant. Simple, and straight to the point. Thanks
This is such a creative way to do it! Thanks for sharing!
That last line is amazing😂
top-tier content, really glad i found this gem.
Beautiful and way easier than I thought. Thank you! :)
Brilliant. Simple and easily done.
Terrific! I could not get the typing bar, but that is what I wanted. Thanks for the video!
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
this works like a charm, thx man!
thanks! thats exacly what i was looking for! very simple
Brotha you are legend.
thank you!
What a cool way to teach
Thank you very much!
this like is for the cat
and this heart
Simple, Straightforward and easy to understand, Thankss for the info. Btw I liked, how's the cat
he got the finest tuna available on amazon , thx for asking
Any idea how to make this responsive after the animation?
how to make it write 3 words without js ??
How to loop it?
amm.. why does the cursor goes to the right side side of the screen??
Is there any way I can convert this to an animated gif?
goes the cat well ? good video thx bro !
(idk why but the cursor disappear after wrote the text, if u have an issue ?)
kalau dibuat looping tapi delay dulu bisa ga mas? caranya gimana?
I love your video
Why doesn't the animation work?
wow so simple
hello, what about if text wraps and you have more lines of text??
he just made a one line solution lol
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
i am doing the same way. but it's not working!
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
Ehhh it isn't perfect but what i done is i removed the white-space in the css
Cool but is it possible to make it responsive?
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}
just put the animation property in hover state
is there a way to remove the cursor after it completes going over the intended text?
Did you figure this out?
cool,but I can,t center this animated text.
Liked for your cat.
You asked like? Imma give you a wholeass subscribe
Its not working for me... What mistakes i made i dont know
bro, is there a way to put a delay like 4s then loop again from the start?
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) */
}
@@cluelessexpert thanks bro its working now =)
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?
can you elaborate that more? Maybe you misspelled the animation names or something with the width
@@cluelessexpert I already fixed it. Thanks!!
how did you achieve the fix for this?
@@bw0ns4mdi35
How about changing text after typing
if you don't mind using scss try maybe try this codepen.io/geoffgraham/pen/MWVmxQp
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
.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
});
good video, but not working infinite property, thanks
Lmao wish I could donate 1000 likes to feed that stronk cat
source code pls
is it any way to do this without the typing bar?
You mean the line on the right side?
@@cluelessexpert yeah, i mean that bar that acts like a cursor while typing
Yeah, just don’t add it or make the color transparent
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)
redid everything like you did in the video, the animation doesn't happen at all :(
can you give more details my g, maybe we'll solve it
I did one comment too, feed your cat
DI MUGAnA HOY YAWA
Only print one line
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};
`;
I wish i could like this vid multiple times to feed your cat, but youtube onyl allows 1 like....
Edit:- i made some typo...
I didn't get it can anybody explain?
Get gud
Just copy🤐
I thought bro said kindly donate 1 lac
What’s that
1 lac means 100k in Hindi@@cluelessexpert
That’s also appreciated
I am gonna feed your cat with 100 likes