Eu tenho 44 anos, desde 2010 que não trabalho mais com CSS. Sou dos tempos do Maujor e Zen Garden, quando jQuery começou a aparecer. Esse vídeo deixou meu eu do passado emocionado. Que maravilhoso ver isso funcionando. CSS é um labirinto para quem não conhece mas tem toda uma lógica que faz maravilhas. Obrigado pelo vídeo que apareceu despretenciosamente na minha timeline e trouxe essa felicidade. Deu até uma coceirinha e já andei assistindo outros videos seus. Parabéns pelo conteúdo com exemplos tão claros.
Eu que agradeço DEMAIS por suas palavras, Luiz. De verdade. Foi justamente com Maujor e Zen Garden que também iniciei os estudos com CSS. Boas épocas. A gente era feliz e não sabia... :) Nos últimos anos, CSS evoluiu DEMAIS e a tendência é manter esse ritmo. Aproveita que seu eu do passado que gostava de CSS despertou, que vem muito mais coisa boa por aí.
Rapaz, pra fazer landing page ou página pessoal com portfólio isso vai ser uma mão na roda! Do ano passado pra cá o CSS tem lançado várias ferramentas interessantes nativas, teve o :is, o :has, o scroll-behavior smooth, mês passado tbm descobri q agora suporta o “& nesting selector” e agora descubro essa feature incrível de animações em scroll. Sensacional demais!
Moçada, no vídeo esqueci de mostrar o suporte, mas, no momento da publicação, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE"). Outra informação bem legal é que a performance ao se fazer animações semelhantes com JS e CSS, na grande maioria dos casos, fica melhor usando CSS puro (Scroll-driven Animations). 👊 Enquanto o suporte não fica mais próximo de 100%, eis um polyfill que parece bem interessante: github.com/flackr/scroll-timeline
Vídeo muito top!!! Estou rindo a toa com essa atualização do CSS. Não vejo a hora de ver os outros vídeos com as outras propriedades. Show demais!!! Parabéns!!!
@@dpwoficial opa maravilha, como estou aprendendo ainda, eu não sabia que era infinitas... hehe. Fiquei muito feliz por sua reposta.... de qualquer forma, é uma ótima notícia... Já estou no aguardo do seu segundo vídeos de animações... E quando sair o segundo vídeo, comentarei que estarei no aguardo do terceiro heheh..... TMJ Tárcio... sucesso sempre
haha GSAP tem coisas que no CSS nativo (ainda) não tem; vale a pena aprender sim. Mas, com certeza, Scroll-driven Animations vai dispensar bastante o uso dele e de outras libs JS. :)
@@dpwoficial qual a diferença desse pro efeito paralax? Nesse caso o que seria novo seria o comando no css, né? Mas, esse comportamento já havia visto em outros sistemas...
@@DevBraziI Um elemento ser animado pela posição do scroll não tem nada a ver com parallax -- que é a movimentação de "planos" diferentes em velocidades diferentes para criar uma ilusão de profundidade em 2D.
desculpa minha ignorancia... mas, como assim em velocidadas diferentes? parallax seria mais especifico pra mudança de seções? porque ultilizando paralax também tem como ativar animações não é?@@dpwoficial
@@DevBraziI Olha isso, perceba que elementos que estão em planos diferentes se movem em velocidades diferentes. Isso é parallax. codepen.io/WildKING543/pen/zYevmdg Mas perceba que é possível haver animações de scroll sem esse efeito, com cada elemento sendo transicionado de maneira independente, sem correlação, na mesma velocidade etc.
Isso ai é bruxaria, kkk. CSS a cada dia fica mais inacreditável. Uma dúvida: Se eu usar essas propriedades e o browser não suportar, eu imagino que a animação simplesmente não vai acontecer, correto?
@@dpwoficialSó considerei, vou implementar isso em um projeto hoje pra ver como que fica, eu vi no can I use que o animation-timelime no Safari não funciona e no Firefox só com um flag
Achei show, as gostaria que a animação fosse executado em condição única, como naquele exemplo que você deu da tela, se chegar em uma determinada porcentagem da minha View a animação ser executada apenas uma vez, você tem algum vídeo falando sobre? Grato
Meu deus... há 15 anos atrás nunca imaginei que o CSS chegaria nesse vídeo. Antigamente tinha que usar imagem dentro de tabela pra fazer borda arredondada, atualmente a cada ano sai cada coisa maravilhosa. Essa é de longe uma das melhores atualizações da década 😍
@@dpwoficial sim hehe comecei a cursar em 2007 e nunca imaginei que viraria profissão, nem PC eu tinha (e fui ter só anos depois). E inclusive eu estudei muito com vocês (DPW). Agradeço por fazerem parte do meu desenvolvimento 🙌
Estuda sim, é uma área muito interessante e bastante divertida no front. :) Já vi de relance alguma coisa sobre testar animações com Jasmine ou Mocha; de cabeça, não lembro.
Dá uma olhada em: - developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline - developer.mozilla.org/en-US/docs/Web/API/ViewTimeline Mas, dependendo da necessidade, talvez seja mais prático rumar para alguma lib mesmo.
Não entendi muito bem a diferença entre os dois (view e scroll). Na teoria o view era pra ser animado somente quando entrar na viewport correta e permanecer lá, independente de retroceder ou não a rolagem da página (fazendo apenas a animação da entrada do viewport), certo? Mas as duas funções parecem fazer a mesma coisa.
Muito bom, me lembro que entre 2012 e 2016 eu fazia coisas bobas com css, tipo bordas arredondadas, transparências, media queries etc, e ficava encantado. Hoje vejo que o CSS evoluiu muito, acredito que em um futuro próximo vai deixar de ser um Linguagem de estilo para se tornar uma linguagem de programação, e, se possível que tome o lugar o JavaScript rsrsrsr...
Borda arredondada e transparência já considero luxo. Se eu te falar como isso era feito antigamente, você chora. x) Se CSS deixar de ser uma linguagem de estilo, deixa de ser CSS. Agora, que ela está incorporando elementos de programação, isso está. Vai ter um monte de vídeo no canal com altas novidades de CSS, fica ligado. 🧐
Tem que ver se vai bater as classes dos elementos com as classes que você tá colocando na timeline. Sendo um editor de CSS puro e estando os nomes certinhos, não tem porque não funcionar.
@@dpwoficial Eu criei as classes personalizadas e mesmo assim não funcionou e também coloquei a classe do elementor e não rolou. Por exemplo, usou a tag h2 para testar, a classe, a classe seguida da tag e nada. Quando fiz um teste dentro do VS Code funcionou perfeitamente.
@@rafaelnunes8754 Para você ver que é algum erro que tá acontecendo devido às classes do próprio WP. Inspeciona direitinho nas DevTools que com certeza tem boi na linha.
Caramba que massa. Duvida básica: Ao utilizar esses recursos, não existe o problema de compatibilidade com navegadores mais antigos? O que acontece com a execução desse código em um navegador mais antigo?
Existe esse problema, sim. Navegador que não der suporte, simplesmente, não vai funcionar. Por isso é interessante, ao desenvolver um site/app, ter noção do range de compatibilidade de versões para decidir quais tecnologias usar ou não, se vai ter fallback etc.
Realmente uma facilidade enorme, porém ainda não é bem suportado pelos navegadores modernos, acredito que teremos que esperar 1 ano por ai antes de poder utilizar essa feature.
Existem boas libs JS para isso (tipo as que foram mostradas no começo do vídeo), mas faz todo o sentido isso ser serviço de CSS, né, porque é algo relacionado a estilo/visual.
Com todo respeito, mas estão tentando deixar o CSS flexivel igual a uma linguagem de programação e isso faz ele ficar inchado, não vejo a hora que o CSS morrer e os estilos começarem a ser feitos em uma linguagem de programação de verdade, como o JS...
Eu tenho 44 anos, desde 2010 que não trabalho mais com CSS. Sou dos tempos do Maujor e Zen Garden, quando jQuery começou a aparecer.
Esse vídeo deixou meu eu do passado emocionado. Que maravilhoso ver isso funcionando.
CSS é um labirinto para quem não conhece mas tem toda uma lógica que faz maravilhas.
Obrigado pelo vídeo que apareceu despretenciosamente na minha timeline e trouxe essa felicidade. Deu até uma coceirinha e já andei assistindo outros videos seus. Parabéns pelo conteúdo com exemplos tão claros.
Eu que agradeço DEMAIS por suas palavras, Luiz. De verdade.
Foi justamente com Maujor e Zen Garden que também iniciei os estudos com CSS. Boas épocas. A gente era feliz e não sabia... :)
Nos últimos anos, CSS evoluiu DEMAIS e a tendência é manter esse ritmo.
Aproveita que seu eu do passado que gostava de CSS despertou, que vem muito mais coisa boa por aí.
Rapaz, pra fazer landing page ou página pessoal com portfólio isso vai ser uma mão na roda! Do ano passado pra cá o CSS tem lançado várias ferramentas interessantes nativas, teve o :is, o :has, o scroll-behavior smooth, mês passado tbm descobri q agora suporta o “& nesting selector” e agora descubro essa feature incrível de animações em scroll. Sensacional demais!
CSS tá bala!
Moçada, no vídeo esqueci de mostrar o suporte, mas, no momento da publicação, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE").
Outra informação bem legal é que a performance ao se fazer animações semelhantes com JS e CSS, na grande maioria dos casos, fica melhor usando CSS puro (Scroll-driven Animations). 👊
Enquanto o suporte não fica mais próximo de 100%, eis um polyfill que parece bem interessante: github.com/flackr/scroll-timeline
Rolando lero falando agora: "Amado mestre...." Muito obrigado pela aula. Vc é show!!!!
E o salário, ó... 🤏
Thanks!
Aeee! Brigado eu! o/
Valeu pelo vídeo! Essa atualização é simplesmente meu sonho
É o nosso, meu amigo. É o nosso. 🥲
Tu és o Monstro do CSS! 😂👏
😂👊
Show! 👏🏽👏🏽👏🏽👏🏽
\o/
sensacional, obrigado!
Eu que agradeço, meu consagrado. Some não. :)
show de bola!
🤙
Que show, a maioria dessas animações usamos JS, ainda mais a parte do indicador. Muito bom ver o css renovando….
CSS tá uma coisa linda!
Massa demais!
o/
Que massa cara, curti demais!!!
vlwww
Muito interessante , vou até dar uma olhada no seu mini-curso , parabéns.
Olha sim, Eduardo. Se você gostou aqui do Scroll-driven Animations, com certeza, você vai gostar. :)
Que video bom👏🏽
vlw, Bruno!
Que maravilha! Vai facilitar muito o trabalho dos front´s.
Vai mesmo, Camila! o/
Perfeito! Eu adoro CSS vanila pois tenho controle total do código.
Eu também! 👊
Que novidade incrível!! Parabéns pelo conteúdo, muito bom mesmo. Acho que já podemos dizer que o css é uma linguagem de programação, hein! hahahaha
Rapaz... Tô pensando sobre isso há tempos já...
Quando eu chegar a uma conclusão, farei um vídeo com minhas considerações.
@@dpwoficial aguardo por esse vídeo hahaha
Fantástico! Muito Bom!
Muito obrigado! 😃
Massa D+ você é um monstro
Ainda chego lá. :)
Obrigado pela participação, Matheus.
Demais!!!! Valeu pela informação!!!
vlwww
Aleluia RS agora sim o negócio vai ficar bom
O que já era bom agora ficou melhor! :)
Vídeo muito top!!! Estou rindo a toa com essa atualização do CSS. Não vejo a hora de ver os outros vídeos com as outras propriedades. Show demais!!! Parabéns!!!
CSS tá demaaais
Cara que vídeo incrível. Parabéns pelo trabalho!
Eu que agradeço demais pela força, Pedro! \o/
Top demaaaais! Ótimo vídeo, obrigado pelo conteúdo.
Tamos ae, vlwww
mano ainda não tinha visto essa. Muito obrigado isso com certeza vai dar uma alavancada nos meus projetos
CSS FTW o/
Que vídeo bom, ótima didática, ótimo conteúdo.
Muito obrigado.
Muito top! Parabéns por trazer esse conteúdo interessantíssimo!
Eu que agradeço pelo comentário, Conrado. 👍
Muito show, obrigado por compartilhar, já trabalho com desenvolvimento web e vou usar em meus projetos!
Eu que agradeço pela participação, Carlos.
Esqueci de falar no vídeo, mas a performance de scroll-driven animations é bem melhor que quando usa JS. :)
@@dpwoficial Muito bom mesmo, faço animações de scroll com JS e dessa forma nativo no CSS tem várias possibilidades para animar 😁
Muito bom. Já vou começar a aplicar nos meus projetos.
Graaande Sid!
Será que dá para aplicar em certos projetos por aí...? ;)
Amei esse vídeo, bem explicado!
Muito obrigado, Renato.
Sensacional. Este é o Mister M do CSS que revela os truques que todos querem descobrir como é feito!
🥸
Show, belo vídeo!
Obrigado 👍
Sensacional!!! O conteúdo que tu traz é mto bom!!!
Muito obrigado! 😁
Que conteúdo foda, obrigado por dividir conhecimento, 🤩
Eu que agradeço por você ter visualizado, Anderson. vlwww
Muito obrigado pelo vídeo!
Eu que agradeço, Matheus!
Valeu cada segundo que fiquei no video
:D
Que top, muito obrigado!
Disponha!
salvou meu projeto, te amo.
Video SENSACIONAL!!! Parabens e muito obrigada sempre por compartilhar!!!
Eu que agradeço suas participações, Jennifer!
Muito grato!! Like.
Disponha!
Parabéns!
Obrigado!
Maravilhoso! Muito obrigado pela explicação
Disponha!
Top demais 👍🏻
vlwww
cara parabéns pelo conteúdo.
Muito obrigado!
muito top...... Tárcio.... bem que vc poderia fazer um fazer um novo vídeo com o restante das animações css...
quem concorda dar um like....
Posso fazer sim, mas de que "restante" você tá falando? Animações são infinitas. =P
@@dpwoficial opa maravilha, como estou aprendendo ainda, eu não sabia que era infinitas... hehe. Fiquei muito feliz por sua reposta....
de qualquer forma, é uma ótima notícia... Já estou no aguardo do seu segundo vídeos de animações...
E quando sair o segundo vídeo, comentarei que estarei no aguardo do terceiro heheh..... TMJ Tárcio... sucesso sempre
@@NERDboy Muito obrigado!
Dica maravilhosa
Que bom que gostou. :)
Obrigado. Bom conteúdo
Obrigado.
ja ate me inscrevi
Brigadasso! o/
♥ Muito Bom! ♥
vlwww
Meu Deus, tô morrendo pra aprender GSAP e tu vem com essa 😂 parabéns e obrigado!
haha GSAP tem coisas que no CSS nativo (ainda) não tem; vale a pena aprender sim.
Mas, com certeza, Scroll-driven Animations vai dispensar bastante o uso dele e de outras libs JS. :)
Muito bom. ❤
vlwww
que coisa mais incrivel
😁
Ficou top! poderia fazer mais vídeos sobre animação com scroll-driven animation e explicação dos parametros tbm
Boa! Vamos colocar na fila um vídeo explicando com mais detalhes cada parm.
Obrigado pela sugestão, Marlon.
Cara, te vejo como Kevin Powell, só que brasileiro kkkk@@dpwoficial
@@marlinho206 Que isso, jovi... Ainda chego lá. :D
Excelente vídeo! Pra essa feature ser perfeita, só tendo uma forma de não fazer a animação após o scroll, como nas bibliotecas JS.
Pensei nisso também. Às vezes tem alguma maneira e/ou eles vão implementar no futuro.
Esse vídeo me ajudou muito
Satisfação em saber. :)
Nosssss....que loko!
Por demais!
Isso já tinha já po, mas ótima explicação toop s2
É mesmo? E tinha desde quando?
@@dpwoficial qual a diferença desse pro efeito paralax?
Nesse caso o que seria novo seria o comando no css, né? Mas, esse comportamento já havia visto em outros sistemas...
@@DevBraziI Um elemento ser animado pela posição do scroll não tem nada a ver com parallax -- que é a movimentação de "planos" diferentes em velocidades diferentes para criar uma ilusão de profundidade em 2D.
desculpa minha ignorancia... mas, como assim em velocidadas diferentes? parallax seria mais especifico pra mudança de seções? porque ultilizando paralax também tem como ativar animações não é?@@dpwoficial
@@DevBraziI Olha isso, perceba que elementos que estão em planos diferentes se movem em velocidades diferentes. Isso é parallax.
codepen.io/WildKING543/pen/zYevmdg
Mas perceba que é possível haver animações de scroll sem esse efeito, com cada elemento sendo transicionado de maneira independente, sem correlação, na mesma velocidade etc.
legal demais isso
Né? :D
só precisam ficar de olho, alguns navegadores ainda não suportam (firefox, safari) por exemplo..
Firefox com flag funciona; Safari (AKA "o novo IE") ainda não.
Isso ai é bruxaria, kkk. CSS a cada dia fica mais inacreditável. Uma dúvida: Se eu usar essas propriedades e o browser não suportar, eu imagino que a animação simplesmente não vai acontecer, correto?
"CSS a cada dia fica mais inacreditável"
@@dpwoficialSó considerei, vou implementar isso em um projeto hoje pra ver como que fica, eu vi no can I use que o animation-timelime no Safari não funciona e no Firefox só com um flag
@@DanielRios549Exatamente. Esqueci de colocar o Can I Use no vídeo, mas tá assim mesmo.
Achei show, as gostaria que a animação fosse executado em condição única, como naquele exemplo que você deu da tela, se chegar em uma determinada porcentagem da minha View a animação ser executada apenas uma vez, você tem algum vídeo falando sobre?
Grato
Com essa tecnologia, ainda não descobri como faz isso. =/
Meu deus... há 15 anos atrás nunca imaginei que o CSS chegaria nesse vídeo. Antigamente tinha que usar imagem dentro de tabela pra fazer borda arredondada, atualmente a cada ano sai cada coisa maravilhosa. Essa é de longe uma das melhores atualizações da década 😍
Ahh, bom ver um dev das antiga aparecendo. ;)
Com certeza, o CSS vai ficar cada vez mais impressionante!
@@dpwoficial sim hehe comecei a cursar em 2007 e nunca imaginei que viraria profissão, nem PC eu tinha (e fui ter só anos depois). E inclusive eu estudei muito com vocês (DPW).
Agradeço por fazerem parte do meu desenvolvimento 🙌
@@AlexLupoz Opa, aí sim! Muito obrigado por estar com a gente todo esse tempo!
@@dpwoficial tmj 🙌
@@AlexLupoz 👊
O CSS está se tornando uma máquina
Ele vence, vence e vence. E só.
Vou estudar mais as animações usando css, vou fazer seu mini curso, acho muito bonito tem como fazer teste unitário em animações usando css ?
Estuda sim, é uma área muito interessante e bastante divertida no front. :)
Já vi de relance alguma coisa sobre testar animações com Jasmine ou Mocha; de cabeça, não lembro.
Eu gostei muito, porem queria uma forma de manter o objeto na tela após finalizar. Creio que da para manipular com js para parar a animação.
Dá uma olhada em:
- developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline
- developer.mozilla.org/en-US/docs/Web/API/ViewTimeline
Mas, dependendo da necessidade, talvez seja mais prático rumar para alguma lib mesmo.
Só lembrando que isso é experimental, segundo o MDN não é suportado no Firefox, Safari nem em nenhum navegador mobile a não ser o Chrome
Coloquei no comentário fixado a questão de crossbrowser. Só lembrando que não ter amplo suporte é diferente de ser experimental.
Da pra fazer uns scroll personalizados bem massa viu
Né?
Qual a compabtibilidade com os navegadores atuais?
No momento, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE").
Não entendi muito bem a diferença entre os dois (view e scroll). Na teoria o view era pra ser animado somente quando entrar na viewport correta e permanecer lá, independente de retroceder ou não a rolagem da página (fazendo apenas a animação da entrada do viewport), certo? Mas as duas funções parecem fazer a mesma coisa.
- view(): posição do elemento
- scroll(): rolagem da página
Como você fez aquele backgroud-image de início virar um cabelhalho fixo ao dar Scroll??
É um dos exemplos do quê é possível fazer com Scroll-driven Animations. Tem na descrição do vídeo o link do site com muitos outros.
Tu usa o Visual Studio Code?
Sim, mas, no vídeo, foi direto no CodePen.
Tenho o Firefox atualizado e não vejo os exemplos a funcionar no Codepen, alguma sugestão para mim?
No momento, o suporte para Firefox é somente com flag.
Confira no comentário fixado o link para um polyfill.
Muito bom, me lembro que entre 2012 e 2016 eu fazia coisas bobas com css, tipo bordas arredondadas, transparências, media queries etc, e ficava encantado. Hoje vejo que o CSS evoluiu muito, acredito que em um futuro próximo vai deixar de ser um Linguagem de estilo para se tornar uma linguagem de programação, e, se possível que tome o lugar o JavaScript rsrsrsr...
Borda arredondada e transparência já considero luxo. Se eu te falar como isso era feito antigamente, você chora. x)
Se CSS deixar de ser uma linguagem de estilo, deixa de ser CSS. Agora, que ela está incorporando elementos de programação, isso está.
Vai ter um monte de vídeo no canal com altas novidades de CSS, fica ligado. 🧐
@@dpwoficial Ah eu me lembro, eu fazia bordas arredondadas com imagens png feitas no FireWorks.
@@charlesmontilla hahaha Então você também é das antiga. x)
@@charlesmontilla agora sim... me senti representado! xD 😅 Parabéns pelo canal ... Excelente conteúdo!
Caiu um cisco no olho agora!
:')
Olá. Estou tentando aplicar o animation-timeline no Wordpress dentro do Elementor, mais não funciona. Sabe me dizer o porque?
Tem que ver se vai bater as classes dos elementos com as classes que você tá colocando na timeline.
Sendo um editor de CSS puro e estando os nomes certinhos, não tem porque não funcionar.
@@dpwoficial Eu criei as classes personalizadas e mesmo assim não funcionou e também coloquei a classe do elementor e não rolou. Por exemplo, usou a tag h2 para testar, a classe, a classe seguida da tag e nada.
Quando fiz um teste dentro do VS Code funcionou perfeitamente.
@@rafaelnunes8754 Para você ver que é algum erro que tá acontecendo devido às classes do próprio WP.
Inspeciona direitinho nas DevTools que com certeza tem boi na linha.
Caramba que massa. Duvida básica: Ao utilizar esses recursos, não existe o problema de compatibilidade com navegadores mais antigos? O que acontece com a execução desse código em um navegador mais antigo?
Existe esse problema, sim. Navegador que não der suporte, simplesmente, não vai funcionar.
Por isso é interessante, ao desenvolver um site/app, ter noção do range de compatibilidade de versões para decidir quais tecnologias usar ou não, se vai ter fallback etc.
Ainda não funciona em algumas plataformas pelo que pude observar
Verdade. Ainda não está 100%.
mano que programa voce usa? não e o vs code
Uso também, mas, no vídeo, foi direto no CodePen.
sinistro
\m/
Qual software você usou?
codepen.io/
Não funciona ainda no Safari :(
:(
Já tá compatível ??
Na data de hoje: Chrome, Opera e Edge OK; Firefox sob flag; o novo IE (Safari) sem suporte.
Safari sempre atrasado
Ahhahaha. Já ia perguntar sobre o safari. Lembro de experiências negativas com clip path.
@@yuri4dev Famoso "novo IE".
@@yayaygoat 😅
ô mestre, quanto tempo! me diga uma coisa, aquela conversa de pedir para o gerente de projeto lhe enviar e-mails ainda pode? kkkkkkk.
Refresque minha memória... 🤔
@@dpwoficial o seu livro mestre hahah
@@michelsouza3868 hahaha Rapaaaz... O sujeito não conhece o próprio livro. 😅
Realmente uma facilidade enorme, porém ainda não é bem suportado pelos navegadores modernos, acredito que teremos que esperar 1 ano por ai antes de poder utilizar essa feature.
Depende do projeto. Eu já vou usar agora. :)
Eu tentei fazer um negocio parecido, e única opção que encontrei foi JS, algo que deu muito mais serviço!!!
Existem boas libs JS para isso (tipo as que foram mostradas no começo do vídeo), mas faz todo o sentido isso ser serviço de CSS, né, porque é algo relacionado a estilo/visual.
SHOW... MAS JÁ É NATIVO DO CSS ?
É nativo, pow. A intenção do vídeo é mostrar que é nativo -- embora ainda não tenha 100% em todos os browsers.
.c-indicator {
bottom: 0;
animation: scroll 1ms ease-in-out;
animation-timeline: scroll(root);
/* background-color: rgb(156 163 175); */
transform-origin: left;
height: var(--scroll-height);
inset: 0;
position: fixed;
z-index: 20;
}
@keyframes scroll {
from {
scale: 0 1;
}
to {
scale: 1 1;
}
} como consigo fazer funcionar no firefox e outros navegadores aqui so funcionar no chrome
O suporte ainda não é total. No momento, não funciona nativo no FF e Safari (se não me engano).
Com todo respeito, mas estão tentando deixar o CSS flexivel igual a uma linguagem de programação e isso faz ele ficar inchado, não vejo a hora que o CSS morrer e os estilos começarem a ser feitos em uma linguagem de programação de verdade, como o JS...
Que isso, jovi...
Bom mesmo era quando vc precisava colocar uma imagem pra tabela ter bordas arredondadas né okkkk
@@AikaterineG A gente era feliz e não sabia...
Para de ser chato mlk
@@colli3105 então tá, deixa os cara adicionar um milhão de recursos que seriam desnecessários se o CSS fosse acoplado no JS