cefet_front_end

CSS parte 6

Transformações, Transições, Animações

Transformações

Alterando a geometria dos objetos

A propriedade transform
- Translação
- Escala
- Rotação
Efeitos 3D com perspective
Ponto de origem da transformação

A propriedade transform (na MDN)

Define uma transformação geométrica aplicada aos “vértices” de um elemento block (ou inline-block)

Exemplo:

<p>Yay, girei com força!</p>

p { transform: rotate(-3deg); }

Resultado:
Yay, girei com força!

transform com translação

Diversas transformações podem ser atribuídas como valor para a propriedade transform:
- Translação: faz um deslocamento do objeto no espaço
  - translate(x,y)
  - translateX(x)
  - translateY(y)
  - translateZ(z)
  - translate3d(x,y,z)

transform com escala

Escala: faz um dimensionamento do objeto
- scale(x,y)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- scale3d(x,y,z)
- Unidades de medida:
  - Usa-se um número, sem unidade de medida, que é o fator de escala
  - 1 indica tamanho 100%
  - 2 indica dobro do original

transform com rotação

Rotação: altera o ângulo do sistema de coordenadas do objeto
- rotate(ang)
- rotateZ(ang)
- rotateX(ang)
- rotateY(ang)
- rotate3d(x,y,z,ang)
- E mais…
- Unidades de medida (sent. horário):
  - deg: graus, exemplo: rotate(20deg)
  - turn: voltas, exemplo: rotate(-2.5turn)
  - rad: radianos, exemplo: rotate(1rad)

Efeitos 3D

Para ter um efeito de profundidade das coisas, precisamos definir uma projeção perspectiva:
```
body {
  perspective: 400px;
  /* quanto menor, maior
     o efeito */
}
```
- Aqui também usamos uma animation

Ponto de origem da transformação

Normalmente a transformação é feita com base no centro do objeto

É possível definir um ponto que ficará fixo (será a origem da transformação) usando transform-origin:

.porta {
  transform-origin: left center;
}
.porta:hover {
  transform: rotateY(-95deg);
}

Transições

Interpolando valores de propriedades

A propriedade transition
Propriedades que podemos animar
Funções de interpolação
Transição com transformação

Transições CSS

Muitas vezes queremos criar pequenas animações em nossas páginas
- Mudança da cor do botão quando passamos o mouse em cima
- Um elemento se expandindo para revelar mais conteúdo
- Um painel sumindo gradativamente, em vez de desaparecendo
Antigamente isso podia ser feito em JavaScript, com setTimeout
CSS3 especifica uma nova propriedade: transition

Como usar `transition`

Exemplo: mudando cor quando passa o mouse:

Heyyy, hover me

p {
  color: 'red';
  transition: color 600ms linear; 
           /* propriedade duração interpolação */
}

p:hover {
  color: 'black';
}

Escolhemos que propriedade CSS queremos animar, por quanto tempo e qual a função de interpolação

A propriedade transition (na MDN)

É um atalho para:
- transition-property: all, ou qual propriedade CSS deve sofrer transição
- transition-duration: 0s, ou a duração da transição
- transition-timing-function: ease, a função de interpolação
- transition-delay: 0s, tempo de atraso até que se comece a transição

Sintaxe formal:

transition: [ none | <single-transition-property> ] || <time>
              || <timing-function> || <time>;

Propriedades que podemos animar

Nem todas as propriedades são animáveis e elas podem variar entre navegadores
Algumas que são animáveis:
- transform (⚡ fast)
- opacity (⚡ fast)
- color
- background-color
- left
- right
- top
- bottom
- background-position
- border-radius
- margin
- padding
- width
- height
- E mais…

Função de interpolação (timing-function)

Combinando transition e transform

Effects like a boss

<a href="#">Effects like a boss</a>

a {
  display: inline-block;
  transition:transform .2s cubic-bezier(.37,1.89,.59,.73);
}
a:hover {
  transform: scale(1.4);
}

Animações

Alterando propriedades continuamente

A propriedade animation
A regra-arroba @keyframes
Exemplos

A propriedade animation (na MDN)

Especificada no CSS3, animation e @keyframes possibilitam o uso de animações de propriedades CSS de forma similar a transition

<img src="images/balloon.png" id="balao">

#balao {
  position: relative;
  animation: flutuando .5s ease-in-out 0s infinite alternate;
}

@keyframes flutuando {
  from { top: 0;     }
  to   { top: -30px; }
}

Criando uma animação

Uma animação CSS é composta por
1. Uma definição de quadros de animação (@keyframes) e
2. Uma configuração de parâmetros da animação (animation)
Os @keyframes definem o valor das propriedades que variam ao longo da animação
A animation configura o tempo da animação, a ordem de execução e o nome da sequência de quadros a ser usada

A propriedade animation (cont.)

É um atalho para:
- animation-name: none, nome dado ao @keyframes a ser usado
- animation-duration: 0s, duração
- animation-timing-function: ease, função de interpolação
- animation-delay: 0s, tempo de atraso
- animation-iteration-count: 1, quantas vezes rodar (pode ser infinite)
- animation-direction: normal, em que sentido executar
  - normal, reverse, alternate, alternate-reverse
- animation-fill-mode: none, o que fazer com o resultado da animação após terminar
- animation-play-state: running, estado da animação

Definindo @keyframes

@keyframes piscando {
  from { opacity: 1.0; }   /* usa apenas     */
  to   { opacity: 0.7; }   /* 'from' e 'to'  */
}

@keyframes terra-ao-longo-do-dia {
  /* define quantos pontos forem necessários */
  0%   { background: #6c5228; }  33%  { background: #48a037; }
  66%  { background: #48a037; }  100% { background: #6c5228; }
}

animation: terra-ao-longo-do-dia 20s linear 0s infinite;

Exemplo 1: estrelinha girando

.estrela-mario-1:hover {  /* apenas em :hover */
  animation: girando 1s ease-in-out 0s infinite alternate;
}

@keyframes girando {
  from {
    transform: rotate(15deg);
  }
  to {
    transform: rotate(-15deg);
  }
}

Exemplo 2: mais de uma animação

.estrela-mario-2:hover {
  animation: sumindo 600ms ease-in 3s 1 forwards,
             girando-de-costas 3600ms ease-in 1 forwards;
}

@keyframes sumindo {
  from { opacity: 1; top: 0;      width: 100px; left: 0     }
  to   { opacity: 0; top: -200px; width: 20px;  left: 40px; }
}
@keyframes girando-de-costas {
  from { transform: rotateY(0); }
  to   { transform: rotateY(3600deg); }
}

animation ou transition?

transition … é uma interpolação entre dois valores de uma propriedade

animation … é uma interpolação entre dois ou mais valores, opcionalmente acontecendo mais de uma vez e em ordem alternada

Sempre optamos pelo mais simples
- No caso, transition, quando possível

Referências

Slide easter egg!!

Em 01/04/2015, a Google lançou um espelho para seu buscador, o com.google. Ele se parecia com isto: com.google
Usando transformações e animações, fica facinho fazer um desses!! Paradinha do Google Rabo do cachorro
- Modo de uso de um bookmarklet: arraste o link para sua barra de favoritos e simplesmente clique no favorito quando estiver em uma página