A diferença entre uma interface que parece barata e uma que parece considerada é geralmente um quinto de segundo Um botão que se encaixa em sua cor de pairar no instante em que seu ponteiro toca, ele é lido como abrupto; o mesmo botão que facilita essa cor ao longo de duzentos milissegundos é lido como terminado Essa flexibilização é uma transição CSS, e para algo tão pequeno é notável quantas vezes EU vi isso feito de forma errada, colocado no estado de pairar em vez do estado base, ajustado por tentativa e erro em uma dúzia de atualizações ou aplicado a uma propriedade que não pode animar de forma alguma.
Uma transição é o browser' s maneira de animar a mudança entre dois valores de uma propriedade ao longo do tempo, em vez de mudar instantaneamente É o cavalo de batalha por trás de efeitos de hover, estados de foco, painéis de expansão e classes alternadas, e é quase sempre o primeiro bit de movimento que alguém adiciona a um projeto Mas a taquigrafia amontoa quatro valores em uma linha em uma ordem fixa, a função de temporização é a parte que determina como o movimento se sente, e há um penhasco bem conhecido pessoas caem quando eles tentam desaparecer algo de display: none. Construir a transição onde você pode vê-la jogar salva tudo isso.
o Gerador de Transição CSS permite escolher uma propriedade, definir a duração e o atraso em milissegundos e escolher uma função de temporização entre as palavras-chave CSS e um conjunto de curvas de bezier cúbico selecionadas. Você pode empilhar várias transições em uma abreviação e um botão de disparo reproduz o movimento em um elemento de visualização ao vivo para sentir a flexibilização antes de se comprometer com isso. A declaração exata fica em uma caixa pronta para cópia abaixo.
tl;dr: Uma transição CSS anima a mudança entre dois valores de uma propriedade ao longo de uma duração definida Pertence ao estado base, não ao estado de hover, então o elemento facilita em ambas as direções A ordem abreviada é propriedade, duração, função de temporização, atraso Você não pode fazer a transição
display, porque não tem valores intermediários, e você deve preferir animartransformeopacitypara um desempenho suave Este gerador expõe cada parte com uma visualização de hover ao vivo, suporta várias camadas e emite CSS limpo Ele é executado inteiramente em seu navegador sem inscrição.
Que problema resolve um gerador de transição CSS?
A parte difícil de uma transição não é a sintaxe; é que você não pode julgar o movimento lendo-o. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) descreve uma facilidade de salto específica, mas a única maneira de saber se esse salto parece certo para o seu botão é assistir a acontecer E assistir a acontecer em seu próprio projeto significa escrever a regra, configurar o estado de pairar, salvar e mover o mouse sobre o elemento, depois ajustar um número e fazer tudo de novo Esse loop é lento o suficiente para que a maioria das pessoas se contente com a primeira coisa que funciona, em vez da coisa que parece melhor.
Um gerador transforma esse loop em um único clique Você define uma duração e pressiona o gatilho, e o elemento de visualização reproduz a transição na sua frente Altere a função de temporização e pressione-a novamente, e você sente a diferença entre um slide linear e um ajuste de facilidade imediatamente Após algumas rodadas você desenvolve um sentido para o que duzentos milissegundos se sente versus quinhentos, que é a intuição que separa o movimento que ajuda do movimento que fica no caminho Quando você está satisfeito, o CSS de trabalho já está escrito, então não há nada para transcrever.
O mesmo argumento de confiabilidade se aplica aqui como com qualquer construtor CSS visual: você não pode produzir um malformado transition valor arrastando controles deslizantes e escolhendo entre menus, para que a saída seja sempre segura para colar Essa é a razão pela qual mantenho esse tipo de ferramenta próxima, o mesmo instinto por trás de alcançar o Gerador de transformação CSS quando preciso de uma transformação em vez de contar graus na minha cabeça.
Para onde vai a transição, no estado base ou no estado de pairar?
Este é o erro que EU mais vejo, e vale a pena afirmar claramente porque a correção é tão simples A transição pertence ao elemento' s estado base, não no seu :hover regra. Quando a transição é declarada no estado base, o navegador anima a propriedade em ambas as direções: ele facilita a mudança de hover quando o ponteiro chega, e facilita de volta quando o ponteiro sai Essa simetria é o que faz uma interação parecer completa.
Coloque a transição apenas :hover e você obtém um efeito desequilibrado A propriedade anima suavemente no caminho para dentro, porque a transição está presente enquanto o elemento está pairado, mas no momento em que o ponteiro sai, o :hover regra não se aplica mais, a transição vai com ele, e a propriedade se encaixa de volta instantaneamente O resultado é um botão que facilita graciosamente e, em seguida, empurra de volta para baixo, que parece pior do que nenhuma animação em tudo O gerador & #39; s saída é escrito para ir no estado base, ea orientação é cozido na ferramenta exatamente por esta razão Declara-lo uma vez, no próprio elemento, e deixe as mudanças de estado acioná-lo.
Qual é a ordem correta da abreviação de transição?
o transition a abreviação embala até quatro valores em uma linha, e a ordem é fixada pela especificação: propriedade, duração, função de temporização, atraso Então transition: opacity 300ms ease-in-out 100ms significa a propriedade de opacidade, animada ao longo de trezentos milissegundos, usando uma curva de facilidade de saída, após um atraso de cem milissegundos Erre o pedido e o navegador ignora a declaração ou a lê como algo que você não pretendia.
A única regra que pega as pessoas são os dois valores de tempo Tanto a duração quanto o atraso são tempos, e o CSS os distingue puramente pela posição: o primeiro valor de tempo é sempre a duração, e o segundo é sempre o atraso Se você escrever apenas um valor de tempo, ele é lido como a duração, e o atraso permanece em seu padrão de zero É por isso que uma transição que parece começar muito cedo é muitas vezes um caso de atraso acidentalmente escrito primeiro O gerador contorna todo o problema construindo a abreviação para você na ordem correta, e omite o atraso inteiramente quando é zero, então você nunca envia um arrastamento 0ms isso não faz nada Aqui está a anatomia numa mesa.
| Parte | exemplo | O que controla |
|---|---|---|
| propriedade | opacity |
Qual propriedade anima, ou all para cada animable um |
| duração | 300ms |
Quanto tempo a animação leva; o primeiro valor de tempo |
| função temporização | ease-in-out |
A curva de aceleração do movimento |
| atraso | 100ms |
Quanto tempo esperar antes de começar; o segundo valor de tempo |
Por que minha exibição: nenhuma transição não será animada?
Este é o penhasco, e quase todo mundo sai dele pelo menos uma vez Você quer que um elemento desapareça, então você faz a transição display desde none até block e definir opacity, e o elemento apenas aparece sem desbotamento A razão é fundamental: display não é uma propriedade animável Não há meio caminho entre none e block, nenhum valor que o navegador possa interpolar na marca de cinquenta por cento, então não há nada para interpolar A mudança acontece instantaneamente, e qualquer animação de opacidade que você colocou em camadas no topo é cortada porque o elemento não foi renderizado para começar.
A correção clássica é animar opacity e visibility juntos e vão embora display fora disso. visibility pode fazer a transição porque, embora também seja uma propriedade discreta, combiná-la com uma duração permite que o navegador mantenha o elemento visível até que o desvanecimento da opacidade seja concluído na saída. A correção moderna é transition-behavior: allow-discrete, uma capacidade mais recente que permite animar propriedades discretas como display nos pontos finais de uma transição, você realmente pode desaparecer display: none em navegadores que o suportam De qualquer forma, a lição é a mesma: verifique se a propriedade que você está transitando tem valores intermediários antes de passar uma hora se perguntando por que nada se move Este é o tipo de gotcha que uma visualização ao vivo surge em segundos, o que é uma grande parte do argumento para construir movimento onde você pode assisti-lo.
O que é uma função de temporização e por que ela importa tanto?
A função de temporização é a parte de uma transição que decide como o movimento se sente, e faz muito mais trabalho do que a duração Duas transições do mesmo comprimento podem parecer completamente diferentes dependendo de sua curva A linear a transição se move a uma velocidade constante e parece mecânica, como uma peça de máquina. Um ease-out a transição começa rápida e desacelera à medida que chega, o que parece natural porque imita como os objetos físicos desaceleram e é o padrão certo para a maioria dos movimentos da interface. ease-in faz o oposto e é melhor para as coisas que saem da tela.
Por baixo, todas estas são curvas cúbicas-mais bezier As palavras-chave ease, ease-in, ease-out e ease-in-out são apenas nomes amigáveis para específicos cubic-bezier(x1, y1, x2, y2) valores, onde os dois pontos de controle moldam a aceleração O que torna o cubic-bezier poderoso é que um ponto de controle com a y valor acima de um ou abaixo de zero empurra a animação além de seu ponto final e vice-versa, que é como você constrói uma ultrapassagem ou um salto O gerador inclui uma curva padrão Material para movimento de interface limpa e uma curva Back que ultrapassa para uma sensação elástica e lúdica, além de a steps() função para movimento que salta em quadros discretos em vez de deslizar, que é como você anima um sprite ou um contador de tique-taque Escolher uma curva e pressionar o gatilho é a maneira mais rápida de construir uma sensação para o que cada um faz.
Quando devo usar várias camadas de transição?
Uma única transição anima uma propriedade, mas as interações reais geralmente mudam várias de uma só vez Um botão que é levantado ao passar o mouse pode mudar sua cor de fundo, empurrar sua transformação e aprofundar sua sombra, e cada um deles pode querer seu próprio tempo transition a propriedade lida com isso com uma lista separada por vírgulas, onde cada entrada é uma transição completa com sua própria propriedade, duração, função de tempo e atraso.
O gerador suporta isso diretamente: adicione uma camada para cada propriedade, ajuste cada uma independentemente e a ferramenta as une em uma abreviação como transition: background-color 200ms ease, transform 200ms ease-out. A razão para fornecer transições separadas às propriedades em vez de usar all é controle e desempenho. transition: all é conveniente, mas anima todas as propriedades que mudam, incluindo aquelas que você não pretendia, e força o navegador a observar tudo em busca de mudanças Nomear as propriedades específicas é mais previsível e mais barato A predefinição de revelação lenta na ferramenta mostra uma transição de duas camadas, desvanecimento da opacidade e movendo uma transformação junto com um atraso compartilhado, que é a receita padrão para um elemento que facilita a visualização Se o lado da transformação desse emparelhamento é o que você está ajustando, o Gerador de transformação CSS é a ferramenta complementar e os dois são quase sempre usados juntos.
Quais propriedades devo animar para um desempenho suave?
Nem todas as propriedades são igualmente baratas para animar, e a escolha tem um efeito direto sobre se sua transição é executada a sessenta quadros suaves por segundo ou gagueja As duas propriedades a preferir são transform e opacity. Ambos podem ser entregues à GPU e compostos sem recalcular o layout da página, portanto, animá-los permanece suave mesmo em hardware modesto. É por isso que um cartão que desliza com transform: translateX parece amanteigado enquanto a mesma carta é animada left parece rude.
As propriedades para evitar animar são as que acionam o layout: width, height, top, left, margin e padding. Alterar qualquer um destes força o navegador a recalcular a posição e o tamanho do elemento e tudo o que é afetado por ele, em cada quadro da animação, que é caro e é a causa mais comum de movimento janky Se você encontrar-se querendo animar uma largura, geralmente vale a pena perguntar se a transform: scaleX produziria um efeito semelhante mais barato O gerador permite escolher qualquer propriedade para que você nunca seja bloqueado, mas as propriedades que ele lista colocam transform e opacity perto do topo porque esses são os que você deve alcançar primeiro O caso mais amplo para a construção de um conjunto considerado de ferramentas como esta está no Kit de ferramentas para desenvolvedores web peça, e os hábitos de fluxo de trabalho por trás disso estão no Ferramentas de produtividade do desenvolve guia.
Como o gerador mantém a visualização honesta?
Todo construtor visual enfrenta o mesmo risco: a visualização e o código exportado se afastando até que a ferramenta ensine um valor que não será reproduzido Este gerador aplica o exato transition valor que ele gera para o elemento de visualização e o aciona com uma mudança de estado real, de modo que o movimento que você vê é o movimento que o CSS copiado produzirá Não há caminho de animação separado que possa discordar.
Como uma transição só é executada quando uma propriedade muda, a visualização precisa de um estado para alternar entre, que é o que o botão de disparo faz: ele inverte o elemento entre dois conjuntos de valores para que a transição seja disparada e você possa assisti-la Isso espelha como uma transição funciona na natureza, onde um hover, um foco ou uma classe alternada é o que a define A saída também permanece mínima, deixando cair o atraso quando é zero e listando apenas as camadas que você adicionou, a mesma disciplina de emitir apenas declarações significativas que percorrem o gerador gradiente e o gerador caixa-sombra.
Quais navegadores suportam transições CSS?
As transições CSS são suportadas em todos os navegadores atuais e já existem há mais de uma década. O transition propriedade e todas as suas mãos longas são universais e sem prefixo, então a saída deste gerador funciona no Chrome, Firefox, Safari e Edge sem nenhum prefixo de fornecedor ou fallbacks O mais recente transition-behavior: allow-discrete capacidade para animar propriedades discretas como display é mais recente e tem suporte mais estreito, então trate essa técnica específica como um aprimoramento progressivo e mantenha o emparelhamento de opacidade e visibilidade como seu recurso Para as regras oficiais, a especificação CSS Transitions Module Level 1 do W3 C é a fonte primária, e vale a pena ler depois que o gerador lhe der uma ideia de como as peças se encaixam.
Se você estiver montando um conjunto mais amplo de ferramentas visuais CSS, o gerador de transformação e o Gerador filtro CSS emparelhe naturalmente com este, uma vez que uma transição é o que suaviza as transformadas e filtros que você constrói com eles Tudo aqui é executado no lado do cliente, e o CSS que você copia é seu para usar sem tempo de execução, sem etapa de compilação e sem dependência.
Perguntas frequentes
O que é um gerador de transição CSS?
Um gerador de transição CSS é uma ferramenta visual que constrói uma transição CSS a partir de configurações que você escolher Você escolher uma propriedade, duração, função de temporização e atraso, e ele emite a abreviação de transição com uma visualização ao vivo que você pode acionar para assistir a flexibilização.
Onde coloco a transição, no estado base ou no estado hover?
Coloque-o no estado base Uma transição declarada na regra base anima a propriedade em ambas as direções, na mudança de pairar e voltar para fora dela Declarando-a apenas no pairar anima a mudança, mas permite que ela se encaixe instantaneamente quando o ponteiro sai.
Qual é a ordem da abreviação da transição?
A ordem é propriedade, duração, tempo-função, atraso, por exemplo transição: opacidade 300 ms facilidade-in-out 100 ms. O primeiro valor de tempo é sempre a duração e o segundo é sempre o atraso, então um único valor de tempo é lido como a duração.
Por que meu display: nenhum para exibir: transição de bloco não será animado?
Porque exibição não é uma propriedade animable Não há valor intermediário entre nenhum e bloco, então o navegador não tem nada para tween Opacidade de transição e visibilidade juntos em vez disso, ou usar transição-comportamento: permitir-discreto em navegadores mais recentes para desaparecer de exibição: nenhum.
Posso fazer a transição de mais de uma propriedade de uma vez?
Sim. Separe cada transição com uma vírgula, por exemplo transição: opacidade 300 ms facilidade, transformar 200 ms facilidade-out Este gerador constrói essa lista para você como você adicionar camadas, dando a cada propriedade sua própria duração, função de tempo e atraso.
O que é uma função de temporização de bezier cúbico?
Uma função de temporização cubic-bezier define uma curva de aceleração personalizada a partir de dois pontos de controle, escrito cubic-bezier (x1, y1, x2, y2).As palavras-chave ease-in, ease-out e ease-in-out são atalhos para curvas específicas, e pontos de controle acima de 1 ou abaixo de 0 criam uma ultrapassagem, que é como um salto é construído.
Quais propriedades devo animar para um desempenho suave?
Prefira transformação e opacidade Eles são compostos na GPU e não acionam layout, então eles animam a 60 fps A animação de largura, altura, topo, esquerda ou margem força o navegador a recalcular o layout em cada quadro, que é a causa mais comum de transições gagas.
O CSS de transição gerado é gratuito e seguro de usar?
Sim. a ferramenta é totalmente gratuita sem limites de inscrição ou uso, e emite CSS padrão e sem prefixo suportado em todos os navegadores modernos Todo o processamento acontece no seu navegador, então nada é carregado e a ferramenta funciona offline depois de carregada.
