CSS Transforming, Transitioning,Animating Element of your page
Nester artigo Veremos:
- Manipulating elements using transforms for performant transitions and animations
- Adding a “bounce” effect to a transition
- The browser’s rendering pipeline
- Looking at 3D transforms and perspective
Explorando as funções de transformação:
Rotate: Gira o elemento um certo número de graus em torno de um eixo
Translate: Move o elemento para a esquerda, direita, cima ou baixo (semelhante ao posicionamento relativo)
Scale: Encolhe ou expande o elemento
Skew: Distorce a forma do elemento, deslizando sua borda superior em uma direção e sua borda inferior na direção oposta
Changing the transform origin(Mudando a origin do transform)
Uma transformação é feita em torno de um ponto de origem. Este ponto serve como o eixo de rotação, ou o local onde a escalagem ou a distorção começa. Isso significa que o ponto de origem do elemento permanece fixo no lugar, enquanto o resto do elemento se transforma ao seu redor (embora isso não se aplique ao translate() já que todo o elemento se move durante uma translação).
Por padrão, o ponto de origem é o centro do elemento, mas você pode mudar isso com a propriedade transform-origin. Conforme a figuar abaixo mostra alguns elementos transformados em torno de diferentes pontos de origem.
Para o elemento à esquerda, a rotação gira em torno da origem, que é definida usando transform-origin:right bottom. O elemento no meio escala em direção à origem (right top). E o elemento à direita se distorce de tal forma que sua origem (left top) permanece no lugar enquanto o resto do elemento se estende para fora.
A origem também pode ser especificada em porcentagens, medidas a partir do canto superior esquerdo do elemento. As duas declarações a seguir são equivalentes:
NOTA: Você também pode usar um comprimento para especificar a origem em pixels, ems ou outra unidade. Embora, as palavras-chave top, right, bottom, left e center sejam tudo o que você precisará na maioria dos casos.
//using position names to state the origin
transform-origin: right center;
//using percentages to state the origin
transform-origin: 100% 50%;Ok!, how to apply multiple transforms then?
imagine you have a card container and then you wanna apply at all as possible as you can tons of transform:
.card {
padding: 0.5em;
margin: 0 auto;
background-color: white;
max-width: 300px;
transform: rotate(15deg) translate(20px, 0);
}Transionions
Bringing motion to the page with transitions
Understanding timing functions and choosing
the right one
Apply Javascript to Coordinating with
Com uma transição CSS, você pode dizer ao navegador para “suavizar” um valor para outro quando o valor mudar. Por exemplo, se você tiver links azuis com um estado de hover vermelho, uma transição fará com que o link misture de azul para roxo e depois para vermelho quando o usuário passar o mouse sobre ele — e volte ao estado original quando o usuário mover o mouse para fora.
Usadas corretamente, as transições podem melhorar a sensação interativa da página e, porque nossos olhos são atraídos pelo movimento, podem chamar a atenção do usuário para uma mudança conforme ela ocorre. Muitas vezes, as transições podem ser adicionadas à página com pouco esforço.
As transições são feitas com a família de propriedades transition-*. Se estas forem aplicadas a um elemento enquanto um de seus valores de propriedade muda, então essa propriedade fará a transição em vez de mudar imediatamente para o novo valor.
Exemplo de Código HTML com Transição
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a {
color: blue;
text-decoration: none;
transition: color 0.5s ease-in-out;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Este é um link com transição</a>
</body>
</html>Uma transição ocorre sempre que uma propriedade desse elemento é alterada. Isso pode acontecer em uma mudança de estado se o JavaScript mudar algo, como adicionar ou remover uma classe que afeta os estilos do elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!--
Need a visual blank slate?
Remove all code in `styles.css`!
-->
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
<style>
button{
background-color: hsl(180, 50%, 50%);
border: 0;
color: white;
font-size: 1rem;
padding: .3em 1em;
transition: all ease-in .2s
/* transition-property: all;
transition-duration: 0.5s; */
}
button:hover{
background-color: hsl(0, 50%, 50%);
border-radius: 1em;
}
</style>
</head>
<body>
<button>Hover over me</button>
</body>
</html>Note que você não aplicou as propriedades de transição nas regras do :hover ; você as aplicou com um seletor que direciona o elemento o tempo todo, mesmo que esteja fazendo isso(transitioning) com a regra de hover em mente.
Você quer transitar tanto enquanto estiver no estado de hover (transição entrando) quanto após o estado de hover (transição saindo). Enquanto outros valores estão mudando, normalmente você não quer que as próprias propriedades de transição mudem.
Você também pode usar a propriedade abreviada, transition. A sintaxe para isso é mostrada na imagem abaixo . A abreviação aceita até quatro valores para as quatro propriedades de transição: transition-property, transition-duration, transition-timing-function e transition-delay.
O primeiro valor especifica quais propriedades irão transitar. O valor inicial é a palavra-chave `all`, que afeta todas as propriedades, mas se você precisar que a transição se aplique apenas a uma propriedade, especifique essa propriedade aqui.
Por exemplo, `transition-property: color` aplicaria apenas à cor do elemento, deixando outras propriedades mudarem instantaneamente.
Ou também, você pode aplicar múltiplos valores: `transition-property: color, font-size`, por exemplo: short:
transition: border-radius 0.3s linear, background-color 0.6s ease;O segundo valor é a duração. Este é um valor de tempo expresso em segundos (0.3s, por exemplo) ou milissegundos (300ms).
long :
transition-property: border-radius, background-color;
transition-duration: 0.3s, 0.6s;
transition-timing-function: linear, ease;Nota: Ao contrário dos valores de comprimento, 0 não é um tempo válido. Você deve incluir uma unidade para os valores de tempo (`0s` ou `0ms`) ou a declaração será inválida e ignorada pelo navegador.
O terceiro valor é a função de temporização. Isso controla como os valores intermediários da propriedade são calculados, controlando efetivamente como a taxa de mudança acelera ou desacelera durante o efeito de transição.
Isso pode ser um valor de palavra-chave, como `linear` ou `ease-in`, ou uma função personalizada (cubic-bazier).
Transitions (Timing functions)
linear; ease-in; ease-out; ease-in-out;
Understanding Cubic-bazier
As funções de temporização são baseadas em curvas de Bézier definidas matematicamente. O navegador usa essas curvas para calcular o valor de uma propriedade como uma função de mudança ao longo do tempo.
As curvas de Bézier para várias funções de temporização são mostradas na image abaixo assim como todos os valores de palavras-chave que podem ser usados como função de temporização.
Essas curvas começam no canto inferior esquerdo e prosseguem até o canto superior direito. O tempo progride para a direita, e a curva representa como o valor muda durante essa progressão antes de chegar ao valor final. A função de temporização linear é uma progressão constante durante toda a duração da transição — uma linha reta. Os outros valores são curvas, representando aceleração e desaceleração.
Você não está limitado a esses cinco valores de palavras-chave. Você pode definir sua própria curva de Bézier cúbica para transições mais suaves ou mais drásticas. Você pode até adicionar um efeito de “salto”.
/* Transição com efeito de "salto" */
.transition-bounce {
transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}Apos aplicado o codigo acima ,abra sua DevTools e inspecione o elemento da caixa verde. Você deve ver um pequeno símbolo ao lado da função de temporização no painel de Estilos (Chrome) ou no painel de Regras (Firefox). Clique nesse símbolo e uma pequena janela pop-up será aberta, permitindo que você modifique a curva da função de temporização (como na imagem abaixo).
Valores de Parâmetros da Curva de Bézier Cúbica
A função de temporização cubic-bezier é definida por quatro valores de parâmetro: cubic-bezier(x1, y1, x2, y2). Esses valores determinam a forma da curva de Bézier e controlam como a animação progride ao longo do tempo. Aqui está uma explicação simplificada dos parâmetros:
- x1: O ponto de controle inicial no eixo x. Este valor deve estar entre 0 e 1
- y1: O ponto de controle inicial no eixo y. Este valor pode estar fora do intervalo de 0 a 1, permitindo acelerações ou desacelerações.
- x2: O ponto de controle final no eixo x. Este valor deve estar entre 0 e 1.
- y2: O ponto de controle final no eixo y. Assim como
y1, este valor pode estar fora do intervalo de 0 a 1.
Esses parâmetros permitem criar curvas que podem acelerar rapidamente no início e desacelerar no final, ou vice-versa, criando efeitos de animação personalizados.
Exemplo de Curva de Bézier Cúbica Personalizada
/* Transição linear */
.transition-linear {
transition: transform 2s cubic-bezier(0, 0, 1, 1);
}/* Transição suave com aceleração no início e desaceleração no final */
.transition-smooth {
transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}/* Transição com efeito de "salto" */
.transition-bounce {
transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}Steps (transitioning function)
Um último tipo de função de temporização usa a função steps(). Em vez de fornecer uma transição fluida baseada em Bézier de um valor para outro, isso a move em um número de "passos" discretos e instantâneos.
A função steps() aceita dois parâmetros: o número de passos e uma palavra-chave (start ou end), indicando se cada mudança deve ocorrer no início ou no final de cada passo.
Note que end é o valor padrão para o segundo parâmetro, então steps(3) pode ser usado em vez de steps(3, end). Para ver steps em ação, edite seu stylesheet para corresponder a esta listagem.
.box {
position: absolute;
left: 0;
height: 30px;
width: 30px;
background-color: hsl(130, 50%, 50%);
transition: all 1s steps(3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
<style>
button{
background-color: hsl(180, 50%, 50%);
border: 0;
color: white;
font-size: 1rem;
padding: .3em 1em;
/* transition: all ease-in .2s */
/* transition-property: all;
transition-duration: 0.5s; */
transition: all 1s steps(3,start);
}
button:hover{
background-color: hsl(0, 50%, 50%);
border-radius: 1em;
}
</style>
</head>
<body>
<button>Hover over me</button>
</body>
</html>Agora, em vez de mover-se fluidamente da esquerda para a direita por um segundo (a duração da transição), o tempo é dividido em três partes, ou três passos. Para cada passo, a caixa aparece na posição inicial, na posição de um terço, depois na posição de dois terços, antes de mover-se para a posição final na marca de 1 segundo.
Animations
- Adding complex motion to the page with keyframe animations
- Playing animations when the page loads
- Using a spinner animation to provide feedback
- Drawing attention to a save button to remind the user to save
Uma transição é conceitualmente similar a uma animação de keyframes: você define o primeiro quadro (ponto de início) e o último (ponto de término), e o navegador calcula todos os valores intermediários para que o elemento possa transitar suavemente entre eles. Com a animação de keyframes, no entanto, você não está limitado a definir apenas dois pontos. Você pode definir quantos pontos quiser. O navegador preenche os valores de um ponto ao próximo, e assim por diante, até alcançar o keyframe final, produzindo uma série de transições contínuas.
Vamos ver como construir animações de keyframes. Você adicionará algumas à página que começamos anteriormente e, em seguida, explorará algumas outras maneiras de usá-las.
Animações não são algo que você adiciona a uma página apenas para enfeitá-la; elas também podem transmitir feedback significativo ao usuário.
Keyframes, Animações em CSS contêm duas partes: a regra @keyframes, que define uma animação, e a propriedade animation, que aplica essa animação a um elemento. Vamos construir uma animação básica para nos familiarizarmos com a sintaxe.
Esta animação terá três keyframes, conforme mostrado na imagem abaixo ,No primeiro quadro, o elemento é vermelho. No segundo quadro, ele é azul claro e deslocado 100 px para a direita. No quadro final, ele é roxo claro e retorna à sua posição inicial à esquerda.
@keyframes over-and-back {
0% {
background-color: hsl(0, 50%, 50%);
transform: translate(0)
}
50% {
transform: translate(50px);
}
100% {
background-color: hsl(270, 50%, 90%);
transform: translate(0);
}
}
Uma animação com keyframes precisa de um nome; este exemplo define uma animação chamada “over-and-back”. Ela define três keyframes usando porcentagens.
Essas porcentagens indicam quando cada keyframe ocorre na animação: um no início da animação (0%), um no meio (50%) e um no final (100%). As declarações dentro de cada um desses blocos definem como esse keyframe aparece.
Este exemplo anima duas propriedades simultaneamente, mas note que elas não são especificadas em todos os keyframes. O transform desloca o elemento da sua posição inicial, para a direita e depois de volta. No entanto, a cor de fundo não é especificada no keyframe de 50%.
Isso significa que o elemento será animado suavemente de vermelho (em 0%) para roxo claro (em 100%). Em 50%, ele terá o valor diretamente entre essas duas cores.
Vamos adicionar isso a uma página para ver como funciona. Crie um novo documento HTML e adicione esta marcação.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes over-and-back {
0% {
background-color: red;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
background-color: lightpurple;
transform: translateX(0);
}
}
.animated-box {
width: 100px;
height: 100px;
background-color: red;
animation: over-and-back 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>Neste exemplo, a animação “over-and-back” é aplicada a um div com a classe “animated-box”. A animação ocorre em 3 segundos e se repete infinitamente.
Exemplo 2:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>CSS
.box {
width: 100px;
height: 100px;
background-color: green;
animation: over-and-back 1.5s linear 3;
}Abra a página em seu navegador. Você deve ver a animação se repetir três vezes e depois parar. A propriedade animation é uma abreviação para várias propriedades. Neste exemplo, você especificou quatro delas:
animation-name(over-and-back): Indica o nome da animação conforme definido pela regra@keyframes.animation-duration(1.5s): Indica a duração da animação; neste caso, 1,5 segundos.animation-timing-function(linear): Indica uma função de tempo que descreve como a animação acelera e/ou desacelera. Pode ser uma curva de Bézier ou um valor de palavra-chave, como uma função de tempo de transição (ease-in,ease-oute assim por diante).animation-iteration-count(3): Indica o número de vezes que a animação se repete. Se omitido, o valor inicial de 1 é usado.
Recarregue a página para assistir a animação novamente. Vamos observar algumas coisas sobre o comportamento da animação. Primeiro, a cor transita suavemente de vermelho em 0% para roxo claro em 100%, mas então retorna imediatamente para vermelho quando a animação se repete. Se você planeja repetir uma animação, precisa garantir que os valores finais correspondam aos valores iniciais se quiser que essa mudança seja suave. Segundo, após a iteração final, a cor de fundo muda para verde: o valor especificado no conjunto de regras normal. Mas observe que, durante a animação, essa declaração é substituída pelas da @keyframes. Em termos de cascata, as regras aplicadas por uma animação têm precedência sobre outras declarações.
if you find this content useful you can buy me a coffee, by buying me a coffee you're supporting the content and helping it being always updated:
https://buymeacoffee.com/santoscampj
or either through QR code
