Criando uma animação de digitar em tela com CSS

Como fazer um efeito parecido com uma máquina de escrever digitando na tela somente só CSS.
Post com mais informações:
willianjusten....

[@Gostosolucas]

de muitos vídeos este foi o que melhor esplicou!!

[@wandersandrobarrosnunes3077]

Explicou muito bem!

[@matheusjaconis178]

Muito bom!!!!

[@carolinenunes9617]

Me salvou, adorei a dica!! muito útil. Parabenss!!

[@CarlosDaniel_24]

Muito bem explicado!

[@falandoaverdade8493]

Eu sou extremamente visual. Efeitos assim me chamam muito a atenção. Valeu pelas dicas. O curso que comprei é muito chato. Parabens pelo trabalho.

[@sfsorf2125]

top brow

[@fantasmareal]

tem alguma forma de colocar um link estilizado no texto digitado?

[@NiltonOliv]

Olá Willian, a minha frase tem 133 caracteres. Onde modificar para executar formando duas linhas centralizadas. Uma abaixo da outra. Tentei fazer algumas modificações mas não funcionou.

[@moisescastro5414]

O meu só fica piscando, alguém saberia o porque?

[@andersonafla0039]

Muito top o video Willian ! Quebrei um pouco a cabeça para usar o keyframes junto ao styled-components no react, mas no final deu tudo certo.

[@samueloliveira1721]

disponibiliza esse codigo fonte

[@ognusg]

como eu deixo isso responsivo plmds?

[@larissamendes8892]

sua didática é incrível, parabéns Will

[@WillianJustenCursos]

Muuuuiiito obrigado

[@gabrielcouto4356]

Mano vc ajudou demais, muito obrigado, você explica muito bem parabéns !!! Vc dá de 100 a 0 em qualquer professor

[@giovanesantiago7742]

Toooop demais, muito obrigado !

[@luaamaral2524]

O meu não esta fazendo o loop infinito .typing-animation { animation: blinckcursor 500ms infinite steps(40) normal, typing 4s steps(40) 1s normal both;

[@eduop4394]

meu texto tem quebras, aí buga tudo. sabe como posso resolver?

[@gleysibianchi3807]

Cara, você ensina como ninguém, ganhou uma inscrita! Me ajudou muito... usei no meu portifólio. Quando eu diminuia a tela, ficava em cima do texto, então para deixar esse ibean responsivo usei um media query adaptando a posição final do keyframe e da .line.

[@denilsonaparecido3315]

Cara, já ganhou +1 inscrito! Parabéns

[@WillianJustenCursos]

Valeu! Ajuda demais se inscrever!

[@karina15kap]

Cara, eu adoro isso da pessoa conseguir transformar o nada em tudo isso falando "é bem simples". A única coisa que senti falta no vídeo é de como fazer frases seguidas. Com certeza para você "é bem simples" 😅 mas como estou bem no comecinho vou continuar pesquisando aqui rs

[@eversonpintro7409]

Parabéns pela vídeo aula, ficou sensacional. Fácil de entender e o resultado fica incrível !

[@joaomartins2493]

como faço pra fazer o efeito de loop no qual em um determinado espaço de tempo volte a fazer o efeito de digitação

[@SilvioDelgado]

A didática sempre excepcional! Acompanhando o conteúdo. Obrigado e parabéns!

[@ronaldsena9078]

Parabéns Willian, Já ganhou o LIKE e mim Escrevi, vc teria com fazer um vido mostrando números passando rapidamente, aleatoriamente como em uma bomba de combustível e parando exatamente no numero desejado ?

[@WillianJustenCursos]

Opa, num estou fazendo vídeos no momento, mas aqui tem um tutorial legal sobre: css-tricks.com/animating-number-counters/

[@medeiroscode842]

como eu posso fazer para ele ficar sempre repassando a mensagem? sem precisar carregar para fazer a animação novamente

[@toitosimracing]

há alguma maneira de fazer essa escrita quebrar a linha ??

[@jorgedalves1781]

e a animação ser chamada a cada vez que clicar em um botão

[@maducodes]

aula top

[@jorginhodev]

Parabéns Will, sempre mandando bem. Já compartilhado aqui com os amigos 👊🏻

[@WillianJustenCursos]

Opa, agradeço =D

[@greicemara5543]

no keyframe da animação do typing coloquei o width com 100% e o cursor ficou rente ao final do texto. acho que deu um efeito legal também

[@jorgedalves1781]

No meu caso ocorreu tudo normal, porém não se repete apenas a borda continua picando

[@beinyourguard]

legal ver que temos opções no CSS ao invés de termos que usar JS.

[@WillianJustenCursos]

Sim sim, css é super poderoso.

[@diegocapella5233]

Muito bom Willian! Faltou só colocar em loop. Rsrsrs

[@WillianJustenCursos]

Ah, mas nem acho que ficaria tão legal xD

[@tiagodepizzol238]

MITO

[@jorgedalves1781]

uma outra duvida é em uma pagina com varios textos como identificar qual o texto fará o processo

[@leonardopicalazans]

Muito bom, mas como posso fazer para ele ir linha por linha do texto?

[@erickdeejaymb]

Conseguiu fazer? também tenho essa dúvida

[@Thom.Zille.]

Alguém sabe dizer como faz para o cursor parar de piscar depois de terminar a animação? Tipo, não aparecer mais, só depois que atualiza a página? Obrigado.

[@marcelosurfpaiva]

Vlw man ... tutorial iraaado !! Pra ficar perfeito, só faltou mostrar como colocar em loop infinito só que com uma pausa entre uma animação e outra .... rss #ficaadica Shooww !!!

[@braz_code]

Muito massa!!!!!!1 Como faço pra ficar responsivo..? Eu tentei aqui mais não rolou, ele não quebra a linha no responsivo.

[@gleysibianchi3807]

Usa o media query e coloca um to menor. Eu fiz isso: @media(max-width: 999px){ #start .line{ width: 320px; } @keyframes typing{ from{ width: 0; } to{ width: 320px; } } } Sendo que o meu em posição normal estava parando em 455px.

[@hydrah4]

muito mano, e pra por o backgroud Transparente ?

[@johnatanbarbosa9076]

Cara me ajuda quero fazer uma apresentação nesse estilo, mas não consigo sair da primeira frase. Como faço pra introduzir mais frases, tipo uma depois da outra, aí você ensina como fazer apenas uma frase. Quero escrever um texto inteiro, frase por frase, some uma e aparece outra, tem como fazer um vídeo mostrando, preciso muito🙏🏻

[@gleysibianchi3807]

Cara, sabe na parte que ele colocou aquele 1 segundo? aqui: .typing-animation{ animation: blinkCursor 600ms infinite normal, typing 4s steps(40) 1s normal; } Para fazer isso que você está querendo, provavelmente é só ir aumentando. Você faz várias animações mas pra segunda frase você coloca 2s e a segunda 3s e assim sucessivamente.

Excelente vídeo! 👏

[@johnnywolff9113]

Muito bom a didática é perfeita! Em breve mais um aluno aqui no curso de React, fora os outros que não comprei ainda na Udemy hehe

[@ursulavelilla841]

Olá, amei a aula, sua didática é otima. tentei aplicar essa animação a um site que estou fazendo mas ele começa a escrever pelo centro da frase e não pelo inicio, o que poderia ser? :/ obrigada

[@jessicazhiwlky]

Cara, parabéns e super agradeço pelo conteúdo. Estou começando a estudar e tem ajudado muito! Uma dúvida, talvez boba, mas se eu quisesse criar 2 parágrafos que fossem sendo escritos assim. E seguissem como sequência, tipo sendo escrito mesmo. Como poderia dar essa sequência na escrita de um texto maior e em parágrafos diferentes? Seria repetir as etapas de criação pra cada parágrafo, mas mexendo no tempo e demais informações para que ficasse parecendo que está sendo escrito em sequência? Abraços!

[@relaxedconcentration]

cara,tu conseguiu?por que eu to me matando aqui para fazer isso

[@guilhermerosa8494]

Ótimo vídeo!

[@euantoniorod]

Oi Will , teria como eu atrasar essa animação sem ela ficar aparecendo antes? Porque quando mudo o tempo, ela fica estática antes e depois faz a animação, queria deixar ela sem visibilidade antes da animação, tem como?

[@pratttes]

tbm era oq mais queria saber

[@fellipedepalma]

Sensacional!

[@erickdeejaymb]

Muito boa explicação irmão... mas eu sou meio novato, e eu queria fazer com uma quebra de linha, com o texto maior, seria possivel?

[@llongaray77]

git fora do ar!

[@zanderbrasil]

Parabéns Willian muito boa a didática como sempre. Fiquei apenas com uma dúvida. Como faço para deixar mais de um like no vídeo? 😊

[@WillianJustenCursos]

Ahhahah e eu pensando que era uma dúvida séria xD Compartilha que já é quase outro like =p

[@rafaelsilveeira]

Show! obrigado!

[@Linkk2011]

Toper

[@caiodouglas6062]

Adorei o vídeo, Willian! Tenho bastante dificuldade com unidades absolutas e relativas do CSS, você bem que poderia fazer um curso explicando isso e como funcionaria cada uma. Obrigado!

[@gabrielafogacacunha]

Oi Willian, tudo bem? Eu estava tentando fazer um igual ao site da Loggi (www.loggi.com/), mas estou com dificuldade porque tem uma quebra de linha, além de o cursos conseguir acompanhar essa quebra de linha. Queria saber também como faz pra apagar e escrever alguma coisa no lugar. Vc tem algum tutorial pra isso?

[@WillianJustenCursos]

Para animações mais avançadas, seria melhor usar uma lib: mattboldt.com/demos/typed-js/