Descubra nesta postagem como foram criadas algumas animações conhecidas do CodePen. Todas essas animações usam as técnicas de desempenho discutidas em outros artigos nesta seção.
Consulte Por que algumas animações são lentas? para saber a teoria por trás dessas recomendações e o Guia de animações para dicas práticas.
Animação de carregamento do assistente
Mostrar a animação de carregamento do assistente no CodePen
Essa animação de carregamento é criada totalmente 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 como ele funciona, use o Chrome DevTools.
Inspecionar a animação com o Chrome DevTools
Com a animação em execução, abra a guia "Desempenho" no Chrome DevTools e grave alguns segundos da animação. No resumo, você vai notar que o navegador não está realizando operações de layout ou pintura ao executar essa animação.
Para descobrir como essa animação foi feita sem causar layout ou pintura, inspecione qualquer um dos elementos em movimento no Chrome DevTools. Use o Painel de animações para localizar os vários elementos animados. Clique em um elemento para destacá-lo no DOM.
Por exemplo, selecione o triângulo e observe como a caixa do elemento se transforma durante a jornada no ar, conforme ela gira e retorna à posição inicial.
Com o elemento ainda selecionado, observe o painel de estilos. Você pode conferir o CSS, que desenha a forma do triângulo, e a animação sendo usada.
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;
Para encontrar os keyframes, role para baixo no painel de estilo.
Nele, você vai descobrir que a animação é 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 faça 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 da animação usa técnicas semelhantes. O resultado é uma animação complexa que é executada sem problemas.
Círculo pulsante
Veja o 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, use o Firefox DevTools.
Inspecionar a animação com o Firefox DevTools
Com a animação em execução, abra a guia Performance nas Ferramentas do desenvolvedor do Firefox e grave alguns segundos da animação. Pare a gravação. Na hierarquia, você vai notar que não há entradas para Recalculate Style. Agora você sabe que essa animação não causa o recalculo do estilo e, portanto, as operações de layout e pintura.
Ainda nas Ferramentas do desenvolvedor do Firefox, inspecione o círculo para saber como essa animação funciona.
A <div> com uma 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 alcançados 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 saber quais propriedades estão sendo animadas é selecionar o painel Animations nas Ferramentas do desenvolvedor do Firefox. Você verá uma visualização das animações usadas e das 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 do seu aplicativo. É importante que esses pequenos detalhes não afetem o desempenho geral do app.
Esfera CSS 3D pura
Ver esfera CSS 3D pura 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 de plane.
A esfera é composta por um conjunto de planos e raios giratórios.
Esses planos e raios estão dentro de um wrapper <div>,
e é esse elemento que está girando 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 nos elementos plane e spoke.
Eles usam uma animação que usa a transformação para dimensionar e traduzir.
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 para criar o efeito de giro e pulsação. As animações são bastante simples e usam métodos que funcionam muito bem.
Para conferir o desempenho dessa animação, abra o Chrome DevTools e registre o desempenho dela. Após o carregamento inicial, a animação não aciona o layout ou a pintura e é executada sem problemas.
Conclusão
A partir desses exemplos, você pode ver como animar algumas propriedades usando métodos de desempenho pode criar algumas animações muito legais. Ao usar os métodos de desempenho descritos no guia de animações, você pode criar o efeito desejado sem se preocupar em deixar a página lenta.