Descubra nesta postagem como algumas animações populares encontradas no CodePen foram criadas. Todas essas animações usam as técnicas de desempenho discutidas em outros artigos nesta seção.
Consulte Por que algumas animações estão lentas? para aprender a teoria por trás estas 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 nem 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 "Desempenho" no Chrome DevTools e grave alguns segundos da animação. Você deve ver no Resumo que o navegador não está fazendo nenhuma operação de Layout ou Paint ao executar essa animação.
Para descobrir como essa animação foi feita sem causar layout ou pintura, inspecionar qualquer elemento em movimento no Chrome DevTools. Use o Painel de animações para localizar os diversos elementos animados, clique em qualquer elemento para destacá-lo no DOM.
Por exemplo, selecione o triângulo, e observar como a caixa do elemento se transforma durante a jornada no ar, enquanto gira, e depois retorna à posição inicial.
Com o elemento ainda selecionado, abra o painel Styles. Você pode ver o CSS que desenha a forma do triângulo, e a animação usada.
Como funciona
O triângulo é criado usando o pseudoelemento ::after para adicionar o 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, role para baixo até o painel "Style" para encontrar os frames-chave.
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 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 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, você pode usar o Firefox DevTools.
Inspecionar a animação com o Firefox DevTools
Com a animação em execução, abra a guia Desempenho no Firefox DevTools e grave alguns segundos da animação. Pare a gravação. na hierarquia, 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.
Permanecer no Firefox DevTools inspecione o círculo para ver como essa animação funciona.
A <div> com uma classe pulsating-circle marca a posição do círculo,
No entanto, ele 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 ver quais propriedades estão sendo animadas é selecionar o painel Animations no Firefox DevTools. Você verá uma visualização das animações usadas. e as propriedades que estão sendo animadas.
O próprio 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 poderia ser usada em vários lugares no seu aplicativo, é importante que esses pequenos detalhes não afetem o desempenho geral do aplicativo.
Esfera CSS 3D pura
Ver esfera CSS 3D pura no CodePen
Esta animação parece incrivelmente complicada, mas usa técnicas que já abordamos nos exemplos anteriores. Essa complexidade é resultado 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 planos e raios giratórios.
Esses planos e spokes 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.
ela usa uma animação que usa a transformação para dimensionar e traduzir o conteúdo.
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 tem sido acertar o momento, para criar o efeito giratório e pulsante. As animações são bem diretas, e usar 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 o Paint. e funciona 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. Por padrão, os métodos de desempenho descritos no Guia de animações são usados. você pode passar seu tempo criando o efeito desejado, com menos preocupações sobre tornar a página lenta.