Using CSS transitions

CSS transitions provê uma forma de controlar a velocidade de uma animação quando há mudanças de propriedades CSS. Ao invés de uma propriedade entrar em vigor imediatamente, você pode fazer com que as mudanças em uma propriedade ocorram durante um periodo de tempo. Por exemplo, se você mudar a cor de um elemento de branco para preto, a alteração será instantanea. Utilizando transições CSS, as alterações acontecem em uma intervalo de tempo que seguem uma curva de aceleração, e todas podem ser personalizadas

Animações que envolvem transições entre dois estados geralmente são chamadas de transições implicitas, como os estados entre o começo e o fim são implicitamente definidos pelo browser

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

Animações CSS permitem que você decida quais propriedades animar (listando-os explicitamente), quando a animação deve começar (definindo o delay), quão longa a transição será (definindo a duração), e como a transição irá ocorrer (definindo o tempo da função, linear ou rápido no início, lento no final).

Quais propriedade CSS podem transicionadas?

Você mesmo pode definir qual propriedade será transicionada e de qual maneira. E isso permite a criação de transições complexas. Como não faz sentido animar algumas propriedades, existe uma lista finita com propriedades que podem ser transicionadas.

Nota: A lista de propriedades que podem ser animadas sofre alterações a medida que a especificação se desenvolve.

Nota: O valor automatico , geralmente é complexo. A especificação recomenda não animar com valores automaticos. Alguns user agents, como aqueles baseados no Genko, implementam esse requisito, como aqueles baseados no WebKit, são menos rigosos. Animações CSS que utlizam o valor automatico, podem levar resultados imprevisiveis, dependendo do Browser e da versão, e isso pode ser evitado.

Definindo transições

Transições CSS são controladas usando a propriedade transition. Essa é a melhor maneira de configurar uma transição, assim evitamos parâmetros fora de sintonia, o que pode ser muito frustrante desperdiçar tanto tempo debuggando CSS.

Você pode controlar componentes individuais da transição com a seguinte sub propriedade:

(Observe que essas transições fazem um loop infinitamente apenas para o propósito de nossos exemplos; transitions apenas visualizam a mudança na propriedade de começo ao fim. Se você precisar de visualizações desse loop, procure na propriedade animation.)

transition-property

Especifica o nome ou nomes das propriedades CSS que as transições serão aplicadas. Somente as propriedades listadas aqui serão animadas durante a transição; alterações e todas outras propriedades ocorrem instantaneamente.

transition-duration

Especifica a duração em que as transições devem ocorrer. Você pode especificar uma única duração que se aplica a todas as propriedades durante a transição ou vários valores para permitir que cada propriedade faça a transição em um período de tempo diferente.

transition-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s

transition-timing-function

Especifica uma função para definir como os valores intermediários das propriedades são calculados. As timing functions determinam como os valores intermediários da transição são calculados. A maioria das funções de temporização pode ser especificada fornecendo o gráfico da função correspondente, conforme definido por quatro pontos definindo um bezier cúbico. Você também pode escolher o Easing Functions Cheat Sheet.

transition-timing-function: ease

transition-timing-function: linear

transition-timing-function: step-end

transition-timing-function: steps(4, end)

transition-delay

Define quanto tempo esperar entre o momento que uma propriedade é alterada e a transição começa.

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

A sintaxe do CSS é abreviada da seguinte forma:

css
div {
  transition: <property> <duration> <timing-function> <delay>;
}

Exemplos

Exemplo simples

Esse exemplo executa uma transição de com duração de 4 segundos de delay entre o tempo que o usuário passa o mouse sobre o elemento (evento mouseover), e o início do efeito da animação

css
#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

Exemplo de multiplicas animações de propriedades

Conteúdo CSS

css
.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  -webkit-transition:
    width 2s,
    height 2s,
    background-color 2s,
    -webkit-transform 2s;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

Quando os tamanhos dos valores das listas das propriedades são de tamanhos diferentes

Se alguma propriedade da lista de valores for menor que os outros, esse valor será repetido para que eles correspondam. Por exemplo:

css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Isso é tratado como se fosse:

css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Da mesma forma, se um valor da propriedade da lista, for maior que a transition-property, ela será truncada, então você terá o seguinte CSS:

css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Isso pode ser interpretado como:

css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Usando transições ao destacar menus

Um uso comum de css é para destacar os itens do menu, como hover quando o usúario passa o mouse sobre um elemento. É facíl fácil usar transições CSS para tornar o efeito mais atraente;

Antes de olharmos para os códigos, você poderia dar uma olhada nesse live demo (assumindo que seu browser suporte transições).

Primeiro, nós criamos o menu utilizando apenas HTML

html
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>

Em seguida, nós implementamos o CSS para implementar o visual e aparência do nosso menu. As partes relevantes são serão mostrada aqui:

css
a {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

a:hover,
a:focus {
  color: #333;
  background-color: #fff;
}

Este CSS estabelece a aparência do menu, com as cores de fundo e texto mudando quando o o ocorre o evento de :hover e estado de :focus.

Exemplos JavaScript

Nota: Cuidados devem ser tomados ao usar uma transição imediatamente após:

  • adding the element to the DOM using .appendChild()
  • removing an element's display: none; property.

This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.

Using transitions to make JavaScript functionality smooth

Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.

html
<p>Click anywhere to move the ball</p>
<div id="foo"></div>

Using JavaScript you can make the effect of moving the ball to a certain position happen:

js
var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.transform = "translateY(" + (ev.clientY - 25) + "px)";
    f.style.transform += "translateX(" + (ev.clientX - 25) + "px)";
  },
  false,
);

With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:

css
p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Você pode brincar um pouco aqui: https://jsfiddle.net/9h261pzo/291/

Detectando o começo e a completude de uma transição

Você pode usar o evento transitionend para detectar a uma animação que estava sendo executada chegou ao fim. Esse é o objeto TransitionEvent, que possúi duas propriedades adicionadas além do objeto típico

propertyName

A string indicando o nome da propriedade CSS cuja transição será completada

elapsedTime

A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of transition-delay.

As usual, you can use the addEventListener() method to monitor for this event:

js
el.addEventListener("transitionend", updateTransition, true);

Você detecta o começo de uma transição usando transitionrun (antes do delay) e transitionstart (depois do delay):

js
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);

Nota:: O evento transitionend não dispara se a transição é abortada antes de a transição ser concluída, porque o efeito é feito com display: none

Especificações

Specification
CSS Transitions

Veja Também