Descubra nesta postagem como foram criadas algumas animações populares encontradas no CodePen. Todas essas animações usam as técnicas de desempenho discutidas em outros artigos desta seção.
Consulte Por que algumas animações estão lentas? para aprender a teoria por trás dessas recomendações e o Guia de animações para dicas práticas.
Animação de carregamento do assistente
Animação de carregamento do assistente de visualização no CodePen
Esta animação de carregamento é criada inteiramente com CSS. A imagem e toda a animação foram criadas em CSS e HTML, sem imagens ou JavaScript. Para entender como ele foi criado e qual é o desempenho dele, use o Chrome DevTools.
Inspecionar a animação com o Chrome DevTools
Com a animação em execução, abra a guia "Performance" no Chrome DevTools e grave alguns segundos da animação. O resumo deve mostrar que o navegador não está executando nenhuma operação de Layout ou Paint ao executar essa animação.
Para descobrir como essa animação foi feita sem causar layout e pintura, inspecione qualquer um dos elementos móveis no Chrome DevTools. Use o painel "Animations" para localizar vários elementos animados. Clique em um elemento para que ele fique destacado no DOM.
Por exemplo, selecione o triângulo e observe como a caixa do elemento se transforma durante a jornada no ar, conforme ele gira e retorna à posição inicial.
Com o elemento ainda selecionado, veja o painel Styles. Nela, é possível ver o CSS, que desenha a forma do triângulo, e a animação em uso.
Como funciona
O triângulo é criado usando o pseudoelemento ::after para adicionar conteúdo gerado,
usando bordas para criar a forma.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
A animação é adicionada com a seguinte linha de CSS:
animation: path_triangle 10s ease-in-out infinite;
No Chrome DevTools, é possível encontrar os frames-chave rolando o painel "Style" para baixo.
Você verá que a animação foi criada usando transform para mudar a posição do elemento e girá-lo.
A propriedade transform é uma das propriedades descritas no Guia de animações,
que não faz com que o navegador realize operações de layout ou pintura, que são as principais causas de animações lentas.
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
Cada uma das diferentes partes móveis desta animação usa técnicas semelhantes. O resultado é uma animação complexa que é executada sem problemas.
Círculo pulsante
Conferir círculo pulsante no CodePen
Esse tipo de animação às vezes é usado para chamar a atenção para algo em uma página. Para entender a animação, você pode usar o Firefox DevTools.
Inspecionar a animação com o Firefox DevTools
Com a animação em execução, abra a guia "Performance" no Firefox DevTools e grave alguns segundos da animação. Interrompa a gravação. Na cascata, você verá que não há entradas para ReCalcular estilo. Agora você sabe que essa animação não causa recálculo de estilo e, portanto, operações de layout e pintura.
No Firefox DevTools, inspecione o círculo para ver como essa animação funciona.
O <div> com a classe pulsating-circle marca a posição do círculo,
mas não desenha um círculo.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
O círculo visível e as animações são feitos usando os pseudoelementos ::before e ::after.
O elemento ::before cria o anel opaco que se estende para fora do círculo branco,
usando uma animação chamada pulse-ring,
que anima transform: scale e opacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Outra maneira de ver quais propriedades estão sendo animadas é selecionar o painel Animations no Firefox DevTools. Você verá as animações usadas e as propriedades que estão sendo animadas.
O círculo branco é criado e animado usando o pseudoelemento ::after.
A animação pulse-dot usa transform: scale para aumentar e diminuir o ponto durante a animação.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Uma animação como essa pode ser usada em vários lugares no seu app. É importante que esses pequenos toques não afetem o desempenho geral do app.
Esfera 3D pura CSS
Conferir esfera 3D do Pure CSS no CodePen
Essa animação parece incrivelmente complicada, mas usa técnicas que já vimos nos exemplos anteriores. A complexidade vem da animação de um grande número de elementos.
Abra o Chrome DevTools e selecione um dos elementos com uma classe plane.
A esfera é composta por um conjunto de raios e planos giratórios.
Esses planos e spokes estão dentro de um wrapper <div>,
e é esse elemento que está em rotação usando transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
Os pontos podem ser encontrados aninhados dentro dos elementos plane e spoke.
Eles usam uma animação que usa a transformação para dimensioná-los e traduzi-los.
Isso cria o efeito pulsante.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
O trabalho envolvido na criação dessa animação foi acertar o tempo, criar o efeito de giro e pulsação. As animações em si são bastante diretas e usam métodos que funcionam muito bem.
Para conferir o desempenho dessa animação, abra o Chrome DevTools e grave a performance enquanto ele está em execução. Após o carregamento inicial, a animação não vai acionar o layout ou o Paint e será executada sem problemas.
Conclusão
A partir destes exemplos, você pode ver como animar algumas propriedades usando métodos de alto desempenho pode criar algumas animações muito legais. Por padrão, para os métodos de desempenho descritos no Guia de animações, você passa seu tempo criando o efeito desejado, com menos preocupações em relação a tornar a página lenta.