Cara, que conteúdo FOD4! Conheci o canal graças a esse vídeo, e só tenho a te agradecer por ter me tirado tantas dúvidas. Parabéns pelo trabalho, irmão! Continua assim que vc vai longe 🤘🏽
Um dos melhores mini-cursos que vi nesse youtube sobre animações CSS! Parabéns, espero que continue trazendo este tipo de conteúdp para todos nós, que Deus te abençoe sempre e nos ajude a melhorar em Front-end e UX
Li o seu artigo sobre design e achei uma bela comparação com o cinema. Alguns desenvolvedores seguem a marca do sucesso, copiando estruturas de sites famosos, assim como os blockbusters, pois é o que agrada a maioria das pessoas. Com isso, acabam esquecendo da originalidade, ou alma do site, o que pode se comparar com o cinema de Scorsese, que possui um roteiro (site) bem estruturado, e profundidade nas técnicas e arte de direção.
Legal a comparação. Dá para usar não somente no cinema, mas em praticamente qualquer área. No começo de todo mundo é assim; depois de muita prática e estudos é que se começa a desenvolver um "estilo próprio" (se isso for realmente o que a pessoa almeja).
Boqui-Aberto... Nem sei se existe esse termo...Ma sé como eu me sinto depois de ter feito este tour pelos Html e CSS, guiado pelas sua explicações, que Didática e depois de pronto como parece ser fácil, parabéns nunca que eu ia imaginar esse poder todo!
Que aula maravilhosa, exatamente o que estava procurando! Parabéns mesmo, muita qualidade tanto no conteúdo, como na forma que ele está sendo transmitido. Excelente minicurso!
Uma das possibilidades é criar uma classe que contenha a animação (ex: "is-animating"), quer dizer, somente quando o elemento tiver essa classe, a animação vai acontecer. Então, via evento JavaScript de click (ruclips.net/video/esXH65f7_n8/видео.html), adicionar essa classe ao elemento. (seria possível remover a classe depois de "X segundos" para, quando houvesse novo clique, a animação rodar novamente)
@@brunofontana1631 Eu não sei direito como ele funciona, mas, caso tenha opção para inserir CSS customizado, tem que fazer via código por aí. Caso não tenha, aí é criar um arquivo .css mesmo e fazer entrar via wp_enqueue_style().
@@dpwoficial Show! Ele tem lugar pra CSS personalizado, sim. Tanto em cada elemento quuando global. Só não sei muito como aplicar o CSS e fazer toda essa conexão com bibliotecas, etc. Obrigado pelas respostas, meu velho!
Ola pode esclarecer uma amimaçao de como fazer? Tenho uma imagem, como faço Tem que separar a imagem do fundo em elementos, uma com left negativo e outro com right negativo?
Não sei se entendi bem, mas você teria que já ter a imagem dividida e animar as partes separadamente. E dê preferência a animar a propriedade transform ao invés de left/right.
Não é extensão, é o Device Mode das DevTools; nativo já. Em nosso vídeo a respeito, mostramos um pouquinho como usar: ruclips.net/video/KMZKWCcTkm4/видео.html
Terá que trabalhar um pouco com JavaScript para isso. Verificar se o elemento que será animado está visível na viewport e aí adicionar uma classe apropriada para animação acontecer.
Opa, Lucas, muito obrigado. Mas não é um projeto, propriamente dito; foram exemplos soltos para demonstrar os conceitos de animações CSS. O vídeo vai ficar por aqui, não se preocupe. Pode assistir mais quantas vezes quiser. 👍
@@dpwoficial é que ficou muito bom, não trabalho com web, mais monto uns sites por hobby, mais mesmo assim gosto de inovação, e esse vídeo ficoh muito bom, me esclareceu algumas dúvidas.
@@canallucasrocha Fico feliz em saber que gostou, Lucas! Se quiser assinar o canal e ativar o sininho, ainda terá muito conteúdo legal sobre animações aqui no canal.
Sass é uma linguagem de estilos e VS Code um editor de códigos. A pergunta não faz muito sentido; você pode usar VS Code, Sublime Text, Bloco de Notas etc.
A medida vw é igual a 1/100 da largura da viewport, então, depende desse tamanho. Leia nosso artigo sobre unidades de CSS para entender melhor: desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
MEU DEEEEUS, que aula valiosa!!! Você ensina bem demais e de forma muito estruturada, por isso seus cursos na Udemy são fantásticos também, meu CSS deu um "passo adiante" graças a você, antes eu estava parado no tempo.
Olha, vou te falar que esse minicurso poderia ter empacotado em um curso pago tranquilamente... Deu um trabaLHÃO para fazer tudo, mas ficou um conteúdo muito bom. Pode procurar no RUclips que não tem 1h de animação CSS assim (ainda mais em português). Obrigados pelas palavras gentis costumeiras, Mateus! :D
@@dpwoficial simm foi a primeira coisa que eu pensei, hahaha tá com qualidade de curso. Cara, aproveitando o contato, se souber de alguma vaga home-office Frontend pra React, to procurando. Tenho vc no linkedin, caso saiba de algo, haha, valeu, sucesso
Para quem quiser uma referência para o KeyFrames (já que ele não mostrou o html) pode copiar e colar que este vai servir. ps: Já vai estar com a animação
Fala, Tárcio, blz? Então, eu fui tentar aplicar 2 animações no mesmo objeto criando 2 @keyframes independentes (por exemplo, um para movimento vertical e outro pra movimento lateral, que, teoricamente, ao somar, ficaria fazendo um movimento pendular de "infinito"). Pra tentar aplicar isso, eu utilizei duas vezes o atributo "animation" e em cada um, eu chamei um nome das @keyframes criadas. Porém, percebi que ele considera apenas um "animation" (no caso, sempre o último). Queria saber: é possível aplicar duas animações criadas em um único objeto? Se sim, como?
Do jeito que você fez, o navegador interpreta que você quis sobrescrever a propriedade anterior (Cascata), então, considera somente a última, mesmo. O macete é: a propriedade `animation` aceita múltiplos valores separados por vírgula. ;)
Parabéns pela aula, eu não consegui encontrar uma aula de como fazer o efeito de aparecer a medida em que for rolando na tela, os meus aparecem da pagina inteira de uma vez, não sei se faz com css puro.
Por enquanto, não é possível nativamente, mas já está chegando essa feature no CSS. Questão de pouco tempo já será possível. Vai ter vídeo no canal explicando melhor, com exemplos.
Obrigado, Annie. Não tem vídeo específico sobre cubic-bezier, mas, resumidamente, é uma função que vai definir como será o "timing" da sua animação. O que a maioria faz é ir em alguma das ferramentas que geram e copiam o código, tal como mostrado no vídeo.
Aula sensacional, sempre tive curiosidade em fazer essas animações. Em poucos minutos consegui criar umas bem bacanas. Obrigada por compartilhar seu conhecimento!
Hola, perdona: Una pregunta, qué caracter utilizas para el &:hover{animation-play-state:paused;} -> "&" es como una "epsilon", no sé como ponerla desde el teclado. Gracias por este tutorial.
Já tem muitos elogios, mas nunca é demais! Cara, fantástico! Simplesmente um muito obrigado. Só acho que no final, assim como indicação de ferramentas, que por sinal tbm todas fantásticas, poderia tbm te indicação de libs de animações..que claro, eu falando isso já demonstra que sou noob no assunto, mas com certeza deve ter diversas, uma melhor que a outra. Sei que é ideal saber da base, mas as libs são uma mão na roda em quesito de produtividade..né?
Muito obrigado pelas palavras, Douglas. Neste minicurso, o objetivo era trazer o conhecimento fundamental necessário para se começar com Animações CSS. Até mesmo a parte final de ferramentas cogitamos em não colocar, para que o treino com o nativo que a linguagem tem a oferecer fosse estimulado, imagina colocar libs de animações, o pessoal ia correr para pegar e usar direto... hehe Mas nada impede que façamos um adendo mostrando mais ferramentas e libs como a que você citou. Quem sabe... ;)
Que video maravilhoso!! Eu estava buscando por algo para fazer a diferença nos E-commerces aqui do México principalmente com relação à experiencia de usuario e você foi no ponto! Vou trazer, de forma inteligente, as animações para enriquecer isso nas lojas online dentro da plataforma VTEX. Tenho 2 cursos seus da Udemy e eles também me abriram a mente demais!! Obrigado por tanto conteúdo de qualidade, você é o cara.
Mano, vc me enganou... ...disse que era mini curso, mas isso é um curso FULL!!! Eu estava procurando uma animação específica na net, mas não encontrei. Vendo seu curso, agora eu entendi como criar o que preciso. Como dar um "double like" aqui no RUclips?!! Muito obrigado me ajudou muito!!! (+ 1 inscrito)
Esse é o básico-fundamental sobre animações CSS. Se é seu primeiro contato com o assunto, normal achar difícil. O vídeo está aí para ser reassistido quantas vezes você quiser. :)
Queria saber se tem como na Animação Degradê um loop? Tipo, sobe o rosa e depois quando chega no topo sobe o azul, ao invés de descer o rosa e aparecer azul novamente.
Uma das melhores vídeoaulas que já vi!! Muito bem explicado, principalmente por usar um projeto básico aplicado ao que realmente importa o ensino do conteúdo proposto! Direto ao ponto, sem frescuragem...
Muito bom cara, estou começando agora na programação e defini o desenvolvimento web como meu foco atual, terminei recentemente um curso de CSS3 e HTML5, ainda estou nas práticas de testes caseiros e tudo mais, criando sites fictícios e projetos pessoais. Por ser absurdamente iniciante no assunto, gostaria de saber qual o nome desse programa que você está usando no vídeo pra fazer os códigos, pois não conheço muitas ferramentas ainda, e aproveitando, eu estou usando o Sublime Text 3, você recomenda ele pra web? Ou tem outros de sua preferência? Obrigado pela atenção, excelente vídeo. ;D
Oi, Pedro! Legal você ter optado por desenvolvimento web. Seja bem vindo. :) Não é exatamente um programa, é um site de compartilhamento de códigos: codepen.io/. Provavelmente, você vai acessá-lo bastante a partir de agora. Sublime é bem legal, mas o editor mais usado atualmente é o Visual Studio Code (não por acaso). Dê uma conferida, ele está realmente muito bom. Obrigado e espero vê-lo mais por aqui. o/
Que contéudo massa! Parabéns!! Vi muitos comentários da galera falando sobre seus cursos na udemy, não consegui encontrar nenhum link que me direcionasse a eles, se possível, manda aqui pra eu dar uma olhada.
Cara muito legal o vídeo, já é a segunda vez que eu o assisto, cada vez aprendendo mais. Como foi um mini curso vc poderia me indicar aonde eu poderia achar mais informações sobre animaçoes css além do seu canal? Algum livro, curso.
Muito obrigado pela consideração, Marlon! :D Como tudo na internet, você consegue encontrar coisas esparsas, "espalhadas", então é bom seguir alguns blogs para ver os artigos. Indicações: CSS-Tricks, Smashing Magazine, Sarah Drasner, Lea Verou, Rachel Nabors. Tem muita gente, a partir desses, você descobre mais. Ah, tem uma newsletter bem legal, também: cssanimation.rocks/
Não é perda de tempo, mas, se está iniciando, tem coisas mais importantes. Vai estudando tranquilamente, "comendo pelas beiradas"; quando já tiver uma base forte, intensifique nas animações.
Não é uma "letra grega", é um e comercial ou "ampersand". Você consegue fazer com Shift+7. Não é algo nativo de CSS; trata-se de uma funcionalidade de Sass chamada Parent Selector. sass-lang.com/documentation/style-rules/parent-selector
⭐ Interessado por convenções, nomenclatura, boas práticas e arquitetura CSS?
mailchi.mp/e40fa97b13dd/cssasc-t1
⭐ Download GRÁTIS do e-book "Os 3 Conceitos Fundamentais de CSS"
mailchi.mp/500e81011405/3-conceitos-css
Parabéns pelo trabalho mano....ótima didática!
Muito obrigado, @@ishorts_br !
Aula fantástica !! Consegue me ajudar?? e-book não está chegando no e-mail :(
@@Fe-ih5jb Manda uma direct no Insta ou Twitter informando seu e-mail pra gente ver.
Conteúdo maravilho, vai ser de muita serventia!
A explicação também é super direta, ajuda quando estamos perdidos kkk
Assista quantas vezes quiser. :)
Vim buscar cobre e encontrei foi ouro. Parabéns! Conteúdo excenlente!!
Heuehe Entrou no rol de comentários favoritos.
Eu tbm...
Ouro? Achei foi diamante SLK aula incrível isso pq tem muito tempo
parece simples, mas e muitaslinhas para chegar nesse layout, o melhor que é tudoo em css, mostrando que e mais que so cores e fontes....
A maioria das pessoas pensam que CSS é bastante simples, "só colocar umas linhazinhas de código aqui"...
Irmão, seu conteúdo é realmente muito bom. Por mais professores como vc no Yt! Que o Senhor Deus o abençoe, cara!!! Você é fera!!!
Muitíssimo obrigado, Diego!
Se quiser dar aquela força compartilhando o vídeo, te agradeço demais.
vlwww
Cara, que conteúdo FOD4!
Conheci o canal graças a esse vídeo, e só tenho a te agradecer por ter me tirado tantas dúvidas.
Parabéns pelo trabalho, irmão! Continua assim que vc vai longe 🤘🏽
Vlw msm, Lucas! Obrigado pela força, brow!
Eu estava procurando um vídeo explicativo sobre animações css, encontrei foi mais do que eu procurava aqui!
Então valeu a pena. :)
Um dos melhores mini-cursos que vi nesse youtube sobre animações CSS! Parabéns, espero que continue trazendo este tipo de conteúdp para todos nós, que Deus te abençoe sempre e nos ajude a melhorar em Front-end e UX
Agradeço IMENSAMENTE DEMAIS seu comentário, David! Se Ele quiser, vamos continuar trazendo muitos conteúdos, sim! o/
Simplesmente incrível
VLW
Aula show!!
vlwww 😃
Muito bom....
Show-de-bola...
Parabéns pela aula, ótima didática.
Vlw, Márcio!
Curso bom, prático e sensacional.
Vlw, Gael! :D
Esta aula já está salva na minha playlist para ser vista diversas vezes, parabéns pelo excelente conteúdo
Muito obrigado, Pablo!
Esse cara é fera, aula nota 10. Obrigado.
Muito obrigado, Lucas! :D
Li o seu artigo sobre design e achei uma bela comparação com o cinema. Alguns desenvolvedores seguem a marca do sucesso, copiando estruturas de sites famosos, assim como os blockbusters, pois é o que agrada a maioria das pessoas. Com isso, acabam esquecendo da originalidade, ou alma do site, o que pode se comparar com o cinema de Scorsese, que possui um roteiro (site) bem estruturado, e profundidade nas técnicas e arte de direção.
Legal a comparação. Dá para usar não somente no cinema, mas em praticamente qualquer área.
No começo de todo mundo é assim; depois de muita prática e estudos é que se começa a desenvolver um "estilo próprio" (se isso for realmente o que a pessoa almeja).
Like, inscrito e salvo na barra de favoritos pra assistir de novo
Haha Muito obrigado, Mikael! ;)
Parabéns pela didática
Muito obrigado.
SENSACIONAL, obrigado pela aula!
Disponha, Luiz! :)
Obrigado mesmo pela aula!
Eu que agradeço o comentário. :)
Sensacional
Muito obrigado, Matheus!
Que video bom, ja vi 3 vezes
Brigadão, Fernando! :D
Se quiser dar aquela força extra e enviar nos grupos que participa, te agradeço demais.
Cara, você é muito top. A quantidade de views e de likes não faz jus à qualidade do seu conteúdo. Gratidão por compartilhar seu conhecimento. Sucesso.
Poxa, obrigado mesmo, Cleyton! Satisfeito em saber que gostou bastante dos nossos conteúdos!
Mini Cursão!
:D
Ótimo mini curso!! Muito obrigado, ajudou bastante. +1 sub
Que bom que ajudou!
Nossa, vídeo incrivelmente bem feito, já deve ter lido isso antes mas.. Parabéns!
Muito obrigado 😁
Melhor video aula no YT
Opa, quem sabe um dia... ;)
simplsment u milior 🔥
Caraaaaaaaaaaaaaaaaaaaaa muito obrigado tá simplesmente I-N-C-R-Í-V-E-L
Vlwww, Tomaz! o/
Boqui-Aberto... Nem sei se existe esse termo...Ma sé como eu me sinto depois de ter feito este tour pelos Html e CSS, guiado pelas sua explicações, que Didática e depois de pronto como parece ser fácil, parabéns nunca que eu ia imaginar esse poder todo!
Também fiquei boquiaberto com seu comentário, Carlos. Muito obrigado MESMO pelas palavras! :')
Que aula maravilhosa, exatamente o que estava procurando! Parabéns mesmo, muita qualidade tanto no conteúdo, como na forma que ele está sendo transmitido. Excelente minicurso!
Muitíssimo obrigado pelas palavras, Lucas! Satisfação!
Você é maravilhoso😌😍😍amo seus vídeos
Muito obrigado, Valentina!!! \o/
Excelente aula. Como poderíamos associar a animação ao clique de um botão, por exemplo? E repeti-la a cada clique?
Uma das possibilidades é criar uma classe que contenha a animação (ex: "is-animating"), quer dizer, somente quando o elemento tiver essa classe, a animação vai acontecer.
Então, via evento JavaScript de click (ruclips.net/video/esXH65f7_n8/видео.html), adicionar essa classe ao elemento.
(seria possível remover a classe depois de "X segundos" para, quando houvesse novo clique, a animação rodar novamente)
Aula sensacional! Como eu uso isso no Elementor do WordPress? Faz um conteúdo sobre isso 🙏🏼
Elementor já tem um monte de transições/animações embutidas.
@@dpwoficial sim, sim, eu sei. Mas tem limitações. Gostaria de saber como fazer essas "chamadas" e links pelo CSS personalizado do Elementor.
@@brunofontana1631 Eu não sei direito como ele funciona, mas, caso tenha opção para inserir CSS customizado, tem que fazer via código por aí.
Caso não tenha, aí é criar um arquivo .css mesmo e fazer entrar via wp_enqueue_style().
@@dpwoficial Show! Ele tem lugar pra CSS personalizado, sim. Tanto em cada elemento quuando global. Só não sei muito como aplicar o CSS e fazer toda essa conexão com bibliotecas, etc. Obrigado pelas respostas, meu velho!
mano aula muito maneira, mas sua voz é muito familiar hein
Se você é assinante do canal, com certeza é familiar. :)
vamos ter tutorial sobre google web designer?
humm, sinceramente, não sei. Me parece que é usado mais para ads que para sites, propriamente ditos. Mas quem sabe. :)
Ola pode esclarecer uma amimaçao de como fazer? Tenho uma imagem, como faço Tem que separar a imagem do fundo em elementos, uma com left negativo e outro com right negativo?
Não sei se entendi bem, mas você teria que já ter a imagem dividida e animar as partes separadamente.
E dê preferência a animar a propriedade transform ao invés de left/right.
PRA CONSEGUIR ANIMAR COM TODAS ESSAS PROPRIEDADES É NECESSÁRIO O SCSS? OU APENAS CSS?
Apenas CSS puro.
Que extensão tu usa pra mudar o tamanho da resolução da tela em 37:42?
Não é extensão, é o Device Mode das DevTools; nativo já.
Em nosso vídeo a respeito, mostramos um pouquinho como usar: ruclips.net/video/KMZKWCcTkm4/видео.html
Como executa as animações com o scroll da página? Sem que necessariamente eu tenha que recarregar a página pra acontecer as animações.
Terá que trabalhar um pouco com JavaScript para isso.
Verificar se o elemento que será animado está visível na viewport e aí adicionar uma classe apropriada para animação acontecer.
@@dpwoficial Eu pesquisei e vi que tem que usar javascript mesmo... Muito obrigado e parabéns pelo curso, muito didático!
@@mayronassuncaoborges6128 Eu que agradeço por participar, Mayron. Abs
como eu faço para colocar a transição no elemento transform rotate, somente nele e n pegar outro transform
Não entendi sua pergunta. Poderia explicar melhor?
@@dpwoficial exemplo: transition: translate .4s; como eu escreveria essa transition para o translate do transform, por que assim n vai.
@@joaomanoel1467 "translate" não é uma propriedade CSS; ela é usada como valor da propriedade "transform".
Colca esse projecto para donwload? Muito bom...
Opa, Lucas, muito obrigado.
Mas não é um projeto, propriamente dito; foram exemplos soltos para demonstrar os conceitos de animações CSS.
O vídeo vai ficar por aqui, não se preocupe. Pode assistir mais quantas vezes quiser. 👍
@@dpwoficial é que ficou muito bom, não trabalho com web, mais monto uns sites por hobby, mais mesmo assim gosto de inovação, e esse vídeo ficoh muito bom, me esclareceu algumas dúvidas.
@@canallucasrocha Fico feliz em saber que gostou, Lucas! Se quiser assinar o canal e ativar o sininho, ainda terá muito conteúdo legal sobre animações aqui no canal.
Gostei 👍
Tem de JS?
Obrigado, Erick.
Por enquanto, não tem de JS.
Posso fazer essas animação usando apenas o Vs Code sem o Sass?
Sass é uma linguagem de estilos e VS Code um editor de códigos.
A pergunta não faz muito sentido; você pode usar VS Code, Sublime Text, Bloco de Notas etc.
Boa tarde Estou tentando criar uma roleta pode me dar uma dica
codepen.io/pder/pen/WYrRQm
100vw e quanto em px ?
é 1344px ?
A medida vw é igual a 1/100 da largura da viewport, então, depende desse tamanho.
Leia nosso artigo sobre unidades de CSS para entender melhor: desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
MEU DEEEEUS, que aula valiosa!!!
Você ensina bem demais e de forma muito estruturada, por isso seus cursos na Udemy são fantásticos também, meu CSS deu um "passo adiante" graças a você, antes eu estava parado no tempo.
Olha, vou te falar que esse minicurso poderia ter empacotado em um curso pago tranquilamente...
Deu um trabaLHÃO para fazer tudo, mas ficou um conteúdo muito bom. Pode procurar no RUclips que não tem 1h de animação CSS assim (ainda mais em português).
Obrigados pelas palavras gentis costumeiras, Mateus! :D
@@dpwoficial simm foi a primeira coisa que eu pensei, hahaha tá com qualidade de curso. Cara, aproveitando o contato, se souber de alguma vaga home-office Frontend pra React, to procurando. Tenho vc no linkedin, caso saiba de algo, haha, valeu, sucesso
@@salvimateus 👍
pdc mn
pode me manda o link do curso dele da udemy de CSS? pfvor =)
O cara simplesmente fez 1 hora de aula sem enrolação e focado no assunto. 😍
E esse foi só o mini curso... ;)
@@dpwoficial Cadê o curso completo? Quero comprar. Hahaha. Por favor. Se tiver, manda o link.
@@matheusmarques841 haha não tem. Quem sabe um dia... ;)
Para quem quiser uma referência para o KeyFrames (já que ele não mostrou o html) pode copiar e colar que este vai servir.
ps: Já vai estar com a animação
Document
.box{
animation: fly 1s;
background-color: purple;
width: 10vw;
height: 10vw;
position: relative; top: 200px;
border-radius: 50%;
}
@keyframes fly{
to{
transform: translateX(calc(100vw - 200px));
}
}
.
Uma das melhores aulas de CSS que eu já vi!! Obrigada
Eu que agradeço pela gentileza, Milena! :D
Fala, Tárcio, blz?
Então, eu fui tentar aplicar 2 animações no mesmo objeto criando 2 @keyframes independentes (por exemplo, um para movimento vertical e outro pra movimento lateral, que, teoricamente, ao somar, ficaria fazendo um movimento pendular de "infinito").
Pra tentar aplicar isso, eu utilizei duas vezes o atributo "animation" e em cada um, eu chamei um nome das @keyframes criadas.
Porém, percebi que ele considera apenas um "animation" (no caso, sempre o último).
Queria saber: é possível aplicar duas animações criadas em um único objeto? Se sim, como?
Do jeito que você fez, o navegador interpreta que você quis sobrescrever a propriedade anterior (Cascata), então, considera somente a última, mesmo.
O macete é: a propriedade `animation` aceita múltiplos valores separados por vírgula. ;)
Minha cabeça explodiu com o tanto de ideias que eu tinha, mas n sabia como aplica-las
Agora sabe! o/
Parabéns pela aula, eu não consegui encontrar uma aula de como fazer o efeito de aparecer a medida em que for rolando na tela, os meus aparecem da pagina inteira de uma vez, não sei se faz com css puro.
Por enquanto, não é possível nativamente, mas já está chegando essa feature no CSS. Questão de pouco tempo já será possível.
Vai ter vídeo no canal explicando melhor, com exemplos.
O vídeo ficou bem interessante,só não entendi sobre o cubic-bezier. Você tem vídeo sobre?
Obrigado, Annie.
Não tem vídeo específico sobre cubic-bezier, mas, resumidamente, é uma função que vai definir como será o "timing" da sua animação.
O que a maioria faz é ir em alguma das ferramentas que geram e copiam o código, tal como mostrado no vídeo.
Aula muitoo boa mesmo parabéns a sua voz é muito parecida com a do canal refúgio mental é idêntico
haha, eu sou a quimera do web dev. Já disseram uma vez que pareço com o Luba, agora com a voz do Refúgio Mental. 😂
cara meus parabens pelo video e pelo material disponibilizado, material muito bom
Eu que agradeço pela força, Werlen.
Conteúdo incrível. Parabéns e obrigado pela aula.
Eu que agradeço pelo seu comentário. :)
quem dá dislike nisso??? ficou puto pq é de graça?
¯\_(ツ)_/¯
caramba que aula boa! e didatica otima! obrigado por esse video!
Imagina. Tamos aê. 👊
Conteúdo foda, salvei aqui na minha playlist
Vlw, Rafael!
Css é bom que une estilização com animações numa listagem só de tag, não precisando estudar 2 linguagens
A maioria dos devs desconhece o verdadeiro poder de CSS.
Eu sou leigo ainda
Que aula TOP! Parabéns e muito obg por esse aulão
Eu que agradeço pelas palavras, Alisson! Abs
E disso que nos iniciantes precisamos kkk
Parabéns, excelente aula, foi direto no assunto, e explicando de forma bem simples!!
Pois aí está. :)
Cara parabéns, aprendi mais com você nesta aula que na faculdade. Show!!!!!
Muito bom.
Tem curso sobre o assunto na Udemy?
Obrigado, Guilherme.
Se quer se eu tenho curso na Udemy, não tenho.
perfect 😀😀
😀
Tem como fazer estas animações de forma gráfica? tipo com uma linha do tempo como era no flash?
Nativamente, não. CSS é código.
Mas tem umas ferramentinhas tipo keyframes.app/
@@dpwoficial Obrigado! vou conferir!
que conteudo top. parabéns
Muito obrigado.
Gostei da visualização dessa plataforma
Obrigado.
Top
vlwww
showw
Vlw, Samuel!
Aula sensacional, sempre tive curiosidade em fazer essas animações. Em poucos minutos consegui criar umas bem bacanas. Obrigada por compartilhar seu conhecimento!
Aí sim, Denise! Parabéns! o/
Hola, perdona: Una pregunta, qué caracter utilizas para el &:hover{animation-play-state:paused;} -> "&" es como una "epsilon", no sé como ponerla desde el teclado. Gracias por este tutorial.
El carácter "ampersand" suele estar junto al número 7 en los teclados; presione Mayús+7.
que aula foi essa muito boa gostei bastante
E eu gostei do seu comentário, Eduardo. Muito obrigado.
Caramba que minicurso foda, nem percebi o tempo passar de tão entretido que eu fiquei.
Vlw, Alex!
Muito bom o vídeo🤩. Queria saber como que fica o arquivo HTML da parte do avião animado. A classe C-plane é referente a quê?
Essa é somente a classe do elemento que está sendo animado (aviãozinho).
Obrigado pelo comentário!
Já tem muitos elogios, mas nunca é demais! Cara, fantástico! Simplesmente um muito obrigado.
Só acho que no final, assim como indicação de ferramentas, que por sinal tbm todas fantásticas, poderia tbm te indicação de libs de animações..que claro, eu falando isso já demonstra que sou noob no assunto, mas com certeza deve ter diversas, uma melhor que a outra. Sei que é ideal saber da base, mas as libs são uma mão na roda em quesito de produtividade..né?
Muito obrigado pelas palavras, Douglas.
Neste minicurso, o objetivo era trazer o conhecimento fundamental necessário para se começar com Animações CSS.
Até mesmo a parte final de ferramentas cogitamos em não colocar, para que o treino com o nativo que a linguagem tem a oferecer fosse estimulado, imagina colocar libs de animações, o pessoal ia correr para pegar e usar direto... hehe
Mas nada impede que façamos um adendo mostrando mais ferramentas e libs como a que você citou. Quem sabe... ;)
@@dpwoficial ah sim, vdd.
E você, de qual parte gostou mais?
@@dpwoficial exatamente a parte que explica propriedade por propriedade e o seu shorthand. Tudo muito bem explicado
Maravilha, @@douglasoliveira6921! Muito obrigado e a gente se vê pela Web!
Muito obrigado por compartilhar! Sucesso. Inscrito e com like! Top!
Opa, vlwww :D
mds, essa foi a melhor aula que já assistir, uma ótima didática com explicações simples e bem claras. simplesmente aula perfeitaaaaa
haha Muito obrigado pelo carinho!
Que video maravilhoso!! Eu estava buscando por algo para fazer a diferença nos E-commerces aqui do México principalmente com relação à experiencia de usuario e você foi no ponto! Vou trazer, de forma inteligente, as animações para enriquecer isso nas lojas online dentro da plataforma VTEX. Tenho 2 cursos seus da Udemy e eles também me abriram a mente demais!! Obrigado por tanto conteúdo de qualidade, você é o cara.
Opa, Alexandre! Muitíssimo obrigado por seu comentário!
E também por saber que os vídeos estão ajudando no México. :D
Cara muito obrigado. Que conteúdo maravilhoso. Me ajudou muito, parabéns pelo seu trabalho!
tmj 👊
Mano, vc me enganou...
...disse que era mini curso, mas isso é um curso FULL!!!
Eu estava procurando uma animação específica na net, mas não encontrei.
Vendo seu curso, agora eu entendi como criar o que preciso.
Como dar um "double like" aqui no RUclips?!!
Muito obrigado me ajudou muito!!! (+ 1 inscrito)
Haha O engano do bem! =P
Muito bacana, ficou show.
Brigadão! :)
Meus dheuz, que tormento!!!! pq abandonaram o Flash mesmo hein? tudo mais rápido e simples nele!!! affff..
E fazer as telas com tabela, então? Aquilo que era layout...
Excelente !
Assim o pretendente desiste de uma vez . rss
Cara, sei não viu, pensei que fosse mais fácil.
Vou tentar um tutor menos qualificado .
Esse é o básico-fundamental sobre animações CSS.
Se é seu primeiro contato com o assunto, normal achar difícil. O vídeo está aí para ser reassistido quantas vezes você quiser. :)
Queria saber se tem como na Animação Degradê um loop? Tipo, sobe o rosa e depois quando chega no topo sobe o azul, ao invés de descer o rosa e aparecer azul novamente.
Tem sim. Dá uma olhada em 26:03. Vai ser questão de você ajustar para as cores necessárias.
Uma das melhores vídeoaulas que já vi!! Muito bem explicado, principalmente por usar um projeto básico aplicado ao que realmente importa o ensino do conteúdo proposto! Direto ao ponto, sem frescuragem...
Muito obrigado pelas palavras, Geverson!
Cara você é tão fera, me sinto tão noob... um dia serei assim, obrigado pela aula!!!
Que isso... Só comecei a estudar antes que você. Continue estudando que daqui a pouco você tá sabendo muito mais. :)
Muito bom cara, estou começando agora na programação e defini o desenvolvimento web como meu foco atual, terminei recentemente um curso de CSS3 e HTML5, ainda estou nas práticas de testes caseiros e tudo mais, criando sites fictícios e projetos pessoais. Por ser absurdamente iniciante no assunto, gostaria de saber qual o nome desse programa que você está usando no vídeo pra fazer os códigos, pois não conheço muitas ferramentas ainda, e aproveitando, eu estou usando o Sublime Text 3, você recomenda ele pra web? Ou tem outros de sua preferência? Obrigado pela atenção, excelente vídeo. ;D
Oi, Pedro!
Legal você ter optado por desenvolvimento web. Seja bem vindo. :)
Não é exatamente um programa, é um site de compartilhamento de códigos: codepen.io/. Provavelmente, você vai acessá-lo bastante a partir de agora.
Sublime é bem legal, mas o editor mais usado atualmente é o Visual Studio Code (não por acaso). Dê uma conferida, ele está realmente muito bom.
Obrigado e espero vê-lo mais por aqui. o/
Simplesmente fantástico, vídeo com conteúdo muito didático, obrigado.
Opa, muitíssimo obrigado!
Irmão eu guste muito teu curso
¡Muchas gracias!
Que contéudo massa! Parabéns!! Vi muitos comentários da galera falando sobre seus cursos na udemy, não consegui encontrar nenhum link que me direcionasse a eles, se possível, manda aqui pra eu dar uma olhada.
Obrigado, Huandrey.
www.udemy.com/course/flexbox-guia-completo/
www.udemy.com/course/css-grid-layout/
Cara muito legal o vídeo, já é a segunda vez que eu o assisto, cada vez aprendendo mais.
Como foi um mini curso vc poderia me indicar aonde eu poderia achar mais informações sobre animaçoes css além do seu canal? Algum livro, curso.
Muito obrigado pela consideração, Marlon! :D
Como tudo na internet, você consegue encontrar coisas esparsas, "espalhadas", então é bom seguir alguns blogs para ver os artigos.
Indicações: CSS-Tricks, Smashing Magazine, Sarah Drasner, Lea Verou, Rachel Nabors. Tem muita gente, a partir desses, você descobre mais.
Ah, tem uma newsletter bem legal, também: cssanimation.rocks/
Muito bom! Obrigado!
Disponha!
cara, não conhecia o canal, cai aqui de paraquedas, adorei o conteúdo... parabéns, favoritei.
Muito obrigado, Diego! 😁
se aprofundar em animações pra quem está iniciando é perda de tempo? alguém sabe dizer.
Não é perda de tempo, mas, se está iniciando, tem coisas mais importantes.
Vai estudando tranquilamente, "comendo pelas beiradas"; quando já tiver uma base forte, intensifique nas animações.
foda!!!
Vlw, Gabriel!
Amei As Aulas Bem Explicativo Já Tou Colocando Em Pratica!! Obrigadoo 08/03/2021
Maravilha, Yuri! Continue firme!
Sensacional... muitas possibilidades a partir do que aqui é ensinado TOP!
🙌
conteúdo top!
Recomendo!
Obrigado 🤙
Como usar a letra grega que aparece nessa parte do código 24:18 não sei qual é essa letra e nem como inserir no teclado.
Não é uma "letra grega", é um e comercial ou "ampersand". Você consegue fazer com Shift+7.
Não é algo nativo de CSS; trata-se de uma funcionalidade de Sass chamada Parent Selector.
sass-lang.com/documentation/style-rules/parent-selector