CSS Animation - Mini Tutorial

[@opoderdafe00]

Comecei o curso dele esses dias. Quero seguir como front e esse cara vai me colocar na direção certa. Esse cara é o pai dos Fronts

[@NERDboy]

Vídeo muito bom.. e eu assistindo 2 anos depois.... precisamos de mais vídeos assim, são poucos canais que trazem conteúdos desse tipo.... faz uma serie de 'animação', serie de 'propriedades css pouco conhecidas' etc.... eu mesmo não sey nada sobre keyframe... muito grato por compartilhar conhecimento...

[@sakamotoyorigami1997]

Mostrou o importante, não enrolou e ajudou muito. Com esse conhecimento, é possível eu tentar me aprofundar mais no assunto, obrigado.

[@victorete3]

Soy de España y he aprendido mucho con este vídeo!!!! Un saludo!

[@mystrader]

Eu achei que era impossível aprender javascript sendo mais designer na época até achar origamid! Vale cada centavo! Melhor curso!! Te dá BASE e ensina a fazer tudo do zero!

[@vdc_cdv]

Mas que coisa magnifica, um tutorial facil que explica muita coisa do css animation que por acaso estava procurando e só encontrava explicaçoes complexas

[@SleepiingRain]

Igual aq

[@MaxwellVenicio]

Parabéns André !! Muito bom, melhor curso que ja comprei!!!!!!!

[@johnnydeymisson1842]

Likeeeeeee cravadoooo pra não sair mais! Origamid é top demais, tá louco, se tu quer aprender tá no lugar certo!

[@adonissilveira4108]

Que aula incrível, explicação excelente... Ainda de quebra disponibilizou a ferramenta que dá pra testar vários códigos e treinar bastante... Não sei como ainda tem pessoas que dão deslike , aff

[@thiagocardosonunes6444]

É o melhor curso pra front end, nenhum supera

[@melissaalvez6297]

André , tu é bom pra caralh0

[@carduglo]

Excelente vídeo aula, parabéns pela ferramenta magnifica...Se não fosse apósentado iria com certeza participar do seu curso... Sua didática é nota 10!

[@MatheusDevArt]

Você é um professor incrível

[@rafaelcostamoura]

Com certeza vou comprar seu curso, parabéns pelo seu vídeo.

[@kbarreto]

Ótimo! Eu tava com um problema aqui no trampo que resolvi com o alternate-reverse do vídeo. Valeu!

[@CaioSouzaTJ]

Entrei só para dar o like maroto, depois assisto tudo. Abração!

[@genivaldojunior6661]

Vou falar uma coisa: Nunca aprendi tanto Html, css e javascript quanto estou aprendendo agora nos cursos da origamid ! O cara se garante no que faz.

[@lectermen]

Eu sou inscrito na Alura, porém o curso de JS da origamid é bem mais detalhado.

[@vitvitvitvitvitvitvitvit]

@@lectermen quanto que custa os cursos?

[@juniiormendes937]

wooow animation css com a origamid = Sucesso!

[@flayer2011]

Parabéns sensacional de maisssssssssssssssssssssssssssss

[@kleberkibe]

sensacional e a ferramenta tbm é muito interessante. Ficou muito legal em monitor ultrawide.

[@tonycarlos4538]

Like dado, conteúdo com quem realmente entende.

[@gabrielsuldine]

Andre é mto fera, melhor conteúdo front da internet

[@NiltonOliv]

Construí a parte do site com bootstrap, não sei porque ação de animar somente é oculta/desoculta. Também se usar este código css, não acontece nada: #modal.animar{ opacity: 0; transform: translateX(-20px); } Tem que deixar assim: #modal.animar{ opacity: 0; transform: translateX(-20px); }

[@iHelio.c]

Qualquer coisa que vocês publicarem eu vou curtir!

[@nytezerak]

Rapaz, esse vídeo vale ouro! Mais um inscrito e parabéns pelo canal * ^*

[@Malvitima0]

Fantástico, parece mágica.

[@MrLfarah]

Vou te falar que esse ferramenta que vc criou (o das mudanças 'on the fly') facilita muito ! Foi a primeira coisa que notei durante o video e estava me perguntando pq o pessoal que faz os tutoriais nao fazem dessa forma. Muito bom !

[@pedneves2]

Nice vídeo professor André, podemos esperar um módulo de animação em css? 👀

[@marcelopereira7346]

Queria também

[@FABvOnline]

@@Origamid em um dia de curso já peguei bem flex e float, Tmj, lança mais curso kkkkk

[@av7045]

veyy eu vou ter da um beijo , namoral vc me salvou !!!!!!

[@thiagofidelis9515]

muito da hora, aula top

[@tomsantos220]

show !!excelent professor !!!

[@YannMetalhead]

Ótima explicação.

[@mrbugbear9018]

Caraca mano bom demais, as vezes dou uma brincada com js e teria pego pelo getElementById e alterado pelo style pra BLUE, não conhecia esse toggle que já fez tudo, obrigado pela dica e aula. Parabéns ✌🏼

[@walasjoao5065]

O curso dele é muito bom, vale apena conhecer se vc não conhece.

[@matheussilveira7935]

Vídeo apareceu nos meus sugeridos do youtube, muito interessante. Estudo CSS há um tempo e não tinha visto nada nesse sentido até agora, bem maneiro. +1 inscrito.

[@Ameto]

Fiz a animação de entrada de um site ontem mesmo, este vídeo teria ajudado bastante. Pelo menos agora estou preparado para a próxima vez que precisar animar.

[@vv7804]

Me ajudou muito tmj

[@wallamesmsb]

Eu precisava dessa aula, obrigado professor

[@narkkao]

Bruxão do front end!! Muito like.

[@kaioaraujo8174]

Excelente vídeo parabéns , estava com dúvida sobre essa parte de permanecer o estilo da animação, esse vídeo esclareceu essa e outra dúvidas .

[@AriMauricio]

Professor, a partir de 5:35 como você fez o JavaScript reconhecer o botão ativar e o modal sem usar .getElementById( ) ou .querySelector( ) ???

[@kayky.png1443]

Cara, vc eh uma lenda, parabens pelos seus videos, conteudo top, explicacao top, quando crescer quero ser igual a vc na programacao kkkkkkkkkkkkk

[@thalitaalbuquerque4602]

Top! Impossível não aprender.

[@wevertonsantiago4305]

Top demais! Não é a toa que irei comprar o seu curso!

[@jorgeteixeira9184]

Massa demais, obrigado pelo conteúdo!

[@11JSIgor]

Sou uma pessoa simples, nem vi o video e já estou deixando meu like. André, você é nota 10000!!!

[@MrGinWR]

Muito bom! As explicações estão ficando muito melhores e de fácil entendimento. Parabéns!

[@flayer2011]

sou seu Fã!!!!!

[@carloseduardo8547]

Como sempre, um conteúdo de muita qualidade e explicação clara e objetiva ... Parabéns André pelo conteúdo! :)

[@tiagorossi7254]

Excelente vídeo...

[@PauloCesar-zi9kq]

Parabéns 👏👏👏👏

[@LuizAugusto-us3mj]

Obrigado por todo seu conhecimento André! Melhor conteúdo não existe.

[@paulooliveira4214]

Parabéns, bem explicado.

[@marcelopereira7346]

Ótimo vídeo, André! Sou assinante do plano vitalício e adoro seu conteúdo/ metodologia. Queria deixar aqui uma indicação pro próximo curso, depois do redesign do Bikcraft, que seria um curso de Next.js. Teu curso de React tá pagando mto boleto meu e com o mercado abraçando o Next.js acho que seria uma boa pedida. Grande abraço, mestre!

[@JoaoVitor-gm8xo]

Iae cara blz ? Estou terminando o curso de web design completo agr, você tem dicas para conseguir trabalhos ?

[@marcelopereira7346]

@@JoaoVitor-gm8xo Depende muito do teu objetivo. Se tiver mirando em freelancer recomendo fazer o de WordPress. Caso esteja em busca de um estágio ou vaga de júnior, recomendo que estude mais JavaScript e depois faça o curso de React. Os dois tem na Origamid e são excelentes. Faz uma conta no GitHub, vai colocando projetos lá, com um readme bem escrito, que na hora que você conseguir uma entrevista vai fazer a diferença. Boa sorte!

[@ViniTeobaldo]

Muito boa a aula, parabéns André.

[@fabiosantos1741]

Parabéns amigo

[@caiosantosvargas]

O like ja veio antes mesmo da estreia

[@henriqueramos8980]

Seus vídeos são bons demais! Obrigado por postar!

[@soaressluiss]

Excelente conteúdo! 👏

[@cabralpeedro]

Já laikei porque sei que vai ser bom

[@viniciusnunes9026]

já chamei no like pois sei o nivel do conteudo .

[@nortonlui1]

Sem dúvida, material top !!!

[@ICARO7]

Muito bom patrão, obrigado por essa aula incrível! 👏🧑‍💻

[@kauaalves8605]

Já deixei meu like, show de bola.

[@tratordejacare2542]

Video muito bom e didático

[@whoisluiz]

Ganhou +1 inscrito!

[@felipealvessi]

Faz mais conteúdo assim, ótima didática. 🚀👏

[@raidertm1653]

Sensacional.

[@jefersonoliveira3550]

Sensacional

[@canaldogatofelix]

que foda, mais um inscrito

[@theorestivo]

Aulão

[@yurionthecode]

Massa André!!!!

[@Drupio]

q aula, slk parabens

[@GeorgeNascimento08]

muito bom, mas será que da para fazer um slide carrossel onde que ele só vai em uma única direção no banner com as setas e radios para controle e que quando chegar no final das imagens ele ir na mesma direção recomeçando sem voltar para traz.

[@Thom.Zille.]

Perfeito!

[@eurodrigosa1]

Muito bom

[@PauloSergioDiasCarmo]

Muito bom, like

[@tlstv]

Mano que incrível, vc é super rápido nisso e eu pensando que demora uns 3 dias rsrs. Ensina como dividir essa tela como está no video, sou novo nesse ramo

[@WescleySL]

Na barra de endereço do navegador no video mostra o site de desenvolvimento.

[@flamengoreactskill]

ferramenta top

[@PauloRoberto-fs3gm]

prof...cadê o curso de E-Commerce?? aprendo muito com seus conteudos.

[@vitorferreirarafael3638]

Já tem

[@wellington5102]

Já tem, é o curso WooCommerce como CMS

[@cleberalmeida953]

Boa cara

[@webnativo]

Quando vai rolar um curso de typescript com reactjs?

[@JF-jd5gv]

Fala André, tem chance de você trazer algum curso de NextJS no futuro? Likee!

[@flayer2011]

cria o canal de assinaturas de membros da Origamid muito top seus videos!!!! ++++++++++++++++++++++++++++++++++++

[@momentshigh]

shooooow!

[@eliezervilela3155]

Like 🔵

[@carlosbalbastro2023]

Beleza!

[@YannSilvaWeb]

Curso novo saindo do forno ...s2...

[@하도빈-e1g]

Thx, sir

[@frysh]

Muito obrigado pelo vídeo, ajudou bastante!! Quando eu recarrego a página, ele não fica no topo, fica abaixo, eu fiz baseado na sua explicação, teria como resolver isso?

[@casfreitastube]

Ensina como faz um loop de like pra eu aplicar em seus vídeos!

[@LaisMelo-qh3cl]

como eu farei pra colocar a frase da barra de anuncio movimenta usando isso > animation: marquee 15s linear infinite; ? eu não estou conseguindo colocar no tema do meu site, parece que precisa alterar em outras seções.

[@14pirikito]

Cara, excelente vídeo!! Mas tenho uma dúvida, como que eu faria pra esse campo de login só aparecer quando eu clicar no link. Pois ele aparece quando atualizo a pagina. Mas parabéns pela excelente aula.

[@Origamid]

Tira a classe animar dele no HTML, assim ele começa sem a animação.

[@zakumyjunior258]

show

[@oileroua0002]

Eu fiquei em dúvida em uma coisa, vc não deu um querySelector nos elementos em js antes pra poder usa-los... mas mesmo assim funcionou, poderia explicar pq??

[@Origamid]

Se o elemento tiver um ID, automaticamente o browser define esse ID como uma propriedade do window. Sendo assim você pode acessar ele direto, só usando o nome. Para manter o código recomendo sempre fazer a seleção com querySelector ou getElementById, mas nesse caso como era só para um exemplo, não tinha necessidade.

[@ricardogava3494]

Fala André, tem como fazer via JS? se puder, é mais complicado? qual é mais recomendado via CSS ou JS?

[@Origamid]

Qualquer parte visual é feita pelo CSS. Se você por exemplo tiver uma função de JavaScript que anime de 0 até 1 a opacidade do elemento, ainda sim a opacidade está sendo definida pelo CSS e não pelo JavaScript. O ideal é dessa forma ai mesmo que mostrei.

[@vitvitvitvitvitvitvitvit]

não tem necessidade de fazer pelo JS, adicione uma classe de acordo com determinado evento (de click, por exemplo) no elemento que tu quer fazer a animação. Nessa classe, tu faz sua animação

[@tdmobile1278]

Qual iMac ou MacBook que vocês da Origamid usam? E onde compraram?

[@alexanderkerner722]

O meu da erro.. Diz "Uncaught ReferenceError: ativar is not defined".. Como conserto?

[@douglasvasquez7969]

Incrivel, tem curso de react?

[@robertdiasmelo]

Tem sim, recomendo os cursos do Rafael.

[@zfelippe7763]

voce usa q programa pra programar assim tava usando vscode mas fica horrivel pra td hr dar refresh

[@francis_js]

O cara realmente é um "monstro da área", ele mesmo criou e colocou no ar a disposição veja: www.code.origamid.dev

[@GabrielSilva-ni4jy]

tem várias extensões do vscode que quando vc salva seu código, automaticamente dá refresh. o live server faz isso =)

[@zfelippe7763]

@@GabrielSilva-ni4jy pode crer, baixei aq era esse mesmo q tava procurando, obrigado!

[@GabrielSilva-ni4jy]

@@zfelippe7763 É nois mano

[@ogutem]

Como faz pra as mudanças aparecerem imediatamente no navegador enquanto digito?