Como inspecionar as suas animações CSS com o Chrome DevTools
As animações CSS, feitas corretamente, podem elevar o seu site a outro nível. Mas criar estas animações pode ser complicado sem ferramentas que proporcionem um controlo preciso sobre elas. E se houvesse uma forma de ver exatamente o que está a acontecer em cada passo da sua animação?
Utilizando a funcionalidade DevTools presente tanto no Google Chrome como no Mozilla Firefox, é possível ter uma visão das suas criações animadas e replicar as que se encontram em vários sítios Web.
Depuração de animação básica com DevTools
De facto, as Ferramentas de desenvolvimento do Google Chrome oferecem uma série de funcionalidades úteis para depurar várias facetas do desenvolvimento Web, incluindo, entre outras, o CSS. Esta ferramenta versátil permite aos utilizadores explorar e analisar o desempenho do seu Web site, identificar potenciais problemas e otimizar elementos de design. Como ponto de partida, pode ser útil utilizar as Ferramentas de desenvolvimento para examinar e investigar animações nos seus projectos.
O código-fonte destas ilustrações pode ser acedido através de um repositório GitHub, que funciona como um depósito digital para projectos de desenvolvimento de software e facilita a colaboração entre programadores, fornecendo funcionalidades de controlo de versões e ferramentas para gerir as alterações efectuadas à base de código.
Definir animações com HTML e CSS
um elemento div e um elemento botão. Além disso, incorpora um documento CSS intitulado “style.css”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
Para aplicar uma aparência consistente a estes dois elementos, é necessário gerar um ficheiro CSS (Cascading Style Sheets) no mesmo diretório que o documento HTML. Este ficheiro deve conter o seguinte código:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}
@keyframes rotateAndChangeColor {
0% {
rotate: 0deg;
background: red;
}
10% {
background: green;
}
40% {
background: blue;
}
70% {
background: yellow;
}
100% {
rotate: 360deg;
background: red;
}
}
Estes estilos criam dois componentes:
Uma caixa animada, visualmente cativante, que roda e altera a sua tonalidade aquando do carregamento da página Web.
O elemento da interface do utilizador conhecido como “botão” sofre uma transformação visual, alterando a sua “cor de fundo” em resposta à entrada do utilizador, especificamente quando o cursor ou ponteiro está posicionado acima dele e não está em contacto com qualquer outro objeto no ecrã. Esta alteração ocorre através do processo de “pairar”, que desencadeia um evento no software do browser ou da aplicação, modificando temporariamente o aspeto do botão.
A utilização da diretiva CSS @keyframes permite a animação da caixa vermelha, enquanto o botão utiliza uma transição para a sua transformação. A comparação destas técnicas pode ser facilitada através da análise das respectivas aplicações nas ferramentas de desenvolvimento do browser.
Inspecionar animações utilizando as DevTools
Para aceder ao separador “Animações” nas Ferramentas de desenvolvimento do Chrome, siga estes passos:
Se clicar com o botão direito do rato na página Web atual, será ativado o menu de contexto, que apresenta várias opções para manipular ou interagir com o conteúdo apresentado no ecrã.
⭐ClickInspect.
Clique nos três pontos verticais situados no canto superior direito do ecrã.
Aceda à opção “Animações” navegando até à categoria “Mais Ferramentas” e seleccionando-a a partir daí.
Esta ação expõe uma representação visual das animações na parte inferior da interface, permitindo aos utilizadores aceder e manipular estes efeitos.
Todos os efeitos visuais que se manifestem nesta página web serão apresentados nesta secção. No caso de recarregar a página e colocar o cursor sobre o elemento especificado, as sequências de animação acima mencionadas aparecerão no separador “Animações” designado, quando a área de visualização do conteúdo for actualizada.
De facto, ao clicar em qualquer uma destas animações, como a animação da caixa, por exemplo, o browser apresentará os quadros-chave de forma a ilustrar a sua estratégia de implementação.
As Ferramentas de desenvolvimento apresentam uma visão geral de todas as animações associadas ao elemento selecionado, uma vez que apenas um processo animado é delineado para o contentor vermelho - rotação e alteração de cor - consequentemente, apenas os detalhes específicos relativos a esta animação serão apresentados na interface.
Pode ajustar a posição da cabeça de reprodução ao longo da linha de tempo para controlar o ritmo da sequência visual, acelerando ou atrasando a sua progressão, dependendo da sua preferência. Além disso, a animação pode ser interrompida em momentos específicos, alternando entre os ícones de reprodução e de pausa, proporcionando-lhe um maior controlo sobre a experiência de visualização. Além disso, as percentagens fornecidas no início da linha de tempo permitem-lhe manipular o ritmo da animação, permitindo uma velocidade reduzida de 25% ou uma taxa ainda mais lenta de 10%.
Ao examinar o comportamento de um botão utilizando as Ferramentas de desenvolvimento, é possível observar os atributos específicos que contribuem para a sua transformação visual, como a cor e a cor de fundo.
Este utilitário dá-lhe a possibilidade de modificar as suas animações de modo a obter uma compreensão abrangente da sua funcionalidade.Permite-lhe diagnosticar e resolver quaisquer problemas que possam surgir no seu Web site, caso existam.
Exemplos de animação avançada
Incorpore a marcação fornecida no elemento de um documento HTML, da seguinte forma:
<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>
Incorpore o trecho de código fornecido na secção