12

Qual a diferença entre as propriedades animation: e transition: do CSS?

2
  • Está em inglês, mas é uma excelente analogia: stackoverflow.com/a/20590319
    – Randrade
    Commented 17/04/2015 às 20:30
  • Meu ingles sexta-feira a essa hora é bem ruim, mas pelo que ele explicou transition controla somente o inicio e o fim das animações e o animation tem um controle melhor sobre tudo que irá acontecer, é isso? Commented 17/04/2015 às 20:37

2 Respostas 2

6

Uma transition não deixa de ser uma animação, no entanto esta é mais limitada.

Você consegue definir o tempo de execução, o delay, quais atributos serão afetados pela transição... Mas você não consegue definir o que deve ocorrer entre o estado inicial e final de uma transição, somente como ela deve iniciar e terminar. Por exemplo:

Inicie com a cor azul, termine com a cor vermelha e essa transição deve ter um tempo de 400ms.

Inicie com cor azul, termine com a cor de fundo vermelha e a cor da fonte branca, a transição do background deve demorar 300ms enquanto a da cor aconteça em 2s.

Passando para o código, seria:

div {
  background: blue;
  float: left;
  margin: 4px;
  height: 30px;
  width: 30px
}

div:hover {
  background: red
}

#b:hover {
  color: white
}

#a {
  transition: all 300ms ease-in
}

#b {
  transition: background 300ms ease-in, color 2s ease-in-out
}
<div id='a'>A</div>
<div id='b'>B</div>

Você não consegue, por exemplo, dizer que no decorrer dessa transição o tamanho da fonte deve ser aumentado para 2em, rodar 360 graus, piscar 3 vezes... para isso existe animation.

Uma animação (animation) permite que você tenha um controle maior sobre o fluxo de uma transição. Agora sim, com uma animação você pode definir através de @keyframes que:

Ela deve iniciar com a cor de fundo vermelha, quando ter concluído 25% da transição o tamanho da fonte deve aumentar para 2em. No decorrer da transição, a cor de fundo deve mudar 3 vezes para o azul. Passando para o código:

@keyframes animacao {
  0%, 40%, 70%, 100% {
    background: red
  }
  
  25% {
    font-size: 2em;
  }
  
  30%, 60%, 90% {
    background: blue;
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes animacao {
  0%, 40%, 70%, 100% {
    background: red  
  }
  
  15% {
    font-size: 2em;
  }
  
  30%, 60%, 90% {
    background: blue;
  }
  
  100% {
    -webkit-transform: rotate(360deg);
  }
}

div {
  background: red;
  width: 40px;
  height: 40px;
  float: left;
  margin: 4px
}

#a {
  -webkit-animation: animacao 2s;
  animation: animacao 2s;
}
<div id='a'>ops</div>

Uma transition precisa de uma ação para acontecer, por exemplo, algo bem comum: O evento de :hover ou então ao alterar uma propriedade. Uma animação não necessariamente precisa de uma ação para ser inicializada tampouco um evento para terminar, se for necessário pode definir que ela seja executada infinitamente.

2
  • renan por curiosidade, tem alguma diferença de usar JS e animation/transition? Porque eu poderia usar JS pra fazer isso. Commented 20/04/2015 às 11:49
  • @AndreyHartung Performance superior por parte do CSS.
    – user23124
    Commented 21/04/2015 às 16:29
5

As duas propriedades são para controlar transições de outras propriedades, mas existe uma pequena diferente relacionado ao controle dessa transição.

Transitions

Você já deve ter passado por uma hora que quisesse que ao passar o mouse, algum elemento trocasse de cor ou outras propriedades. Então você utiliza o :hover, porém o resultado não lhe agrada pois a transição é feita de forma "bruta", muito rápida. No CSS3, as transitions vieram para resolver esse problema, sem que você tenha que recorrer à algum código JavaScript ou até nas pior das hipóteses (que acredito que não aconteça mais), usar Flash.

Para resolver o problema, você simplesmente atribui a propriedade transitionem seu elemento, então a partir dai, todos os estilos seguintes que forem atribuídos irão ter um efeito de transação entre eles. A transição não irá se aplicar somente ao :hover, mas também quando houver uma mudança de classe, por exemplo, na qual ela irá mudar uma propriedade. Exemplo de um elemento com transition:

#quadrado, #quadrado-transition {
  width:100px;
  height:100px;
  background-color:blue;
  margin-left:10px;
  float:left;
}

#quadrado:hover, #quadrado-transition:hover {
  background-color:red;
}

#quadrado-transition {
  /* Aplicando a transition apenas no quadrado da direita */
  transition:background-color 1s linear;
}
<div id="quadrado">Sem transition</div>
<div id="quadrado-transition">Com transition</div>

Dessa forma você consegue mudar as propriedades mais suavemente, mas como fazer o quadrado ir para diversas posições? Ai que entra as animations.

Animations

Diferente das transitions, você pode controlar todo os "trajeto" que o elemento irá percorrer ao ter uma transição. Isso serve para diversas propriedades, você pode definir que aos 50% da animação ele terá cor amarela, só em 100% terá uma cor vermelha. Eu peguei o próximo exemplo da W3Schools:

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}
<div></div>


Toda situação é diferente, então cabe a você, programador, escolher o melhor recurso para a melhor hora. Eu não expliquei todas as propriedades pois acredito que esse não seja o foco da pergunta, mas com uma pesquisa rápida você aprende, e caso não, estamos aqui para ajudá-lo.

Referências

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .