CSS: Animação vs. Transição

Então, eu entendo como executar transições e animações CSS3. O que não está claro, e eu pesquisei no Google, é quando usar qual.

Por exemplo, se eu quiser fazer uma bola quicar, é claro que a animação é o caminho a percorrer. Eu poderia fornecer quadros-chave e o navegador faria os quadros intermediários e eu terei uma boa animação.

No entanto, há casos em que um efeito mencionado pode ser alcançado de qualquer maneira. Um exemplo simples e comum seria implementar o menu da gaveta deslizante do estilo facebook:

Este efeito pode ser alcançado através de transições como:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

Ou, através de animações como esta:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

Com HTML que se parece com isso:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

E, este script jQuery que acompanha:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

O que eu gostaria de entender é quais são os prós e os contras dessas abordagens.

1. Uma diferença óbvia é que a animação exige muito mais código.
2. A animação oferece melhor flexibilidade. Posso ter uma animação diferente para deslizar para fora e para dentro
3. Existe algo que pode ser dito sobre desempenho. Ambos aproveitam a aceleração h / w?
4. Que é mais moderno e o caminho a seguir
5. Mais alguma coisa que você poderia adicionar?

Parece que você sabe como fazê-los, mas não quando.

Uma transição é uma animação , apenas uma executada entre dois estados distintos - ou seja, um estado inicial e um final. Como um menu de gaveta, o estado inicial pode estar aberto e o estado final pode ser fechado ou vice-versa.

Se você deseja executar algo que não envolva especificamente um estado inicial e um estado final, ou precisa de um controle de granulação mais fina sobre os quadros-chave em uma transição, use uma animação.

Vou deixar as definições falarem por si mesmas (de acordo com a Merriam-Webster):

Transição : movimento, desenvolvimento ou evolução de uma forma, estágio ou estilo para outra

Animação : Dotada de vida ou das qualidades da vida; cheio de movimento

Os nomes se ajustam adequadamente a seus propósitos em CSS

Portanto, o exemplo que você deu deve usar transições, pois é apenas uma mudança de um estado para outro

Uma resposta mais curta, direta no ponto:

Transição:

1. Precisa de um elemento acionador (: hover,: focus etc.)
2. Apenas 2 estados de animação (início e fim)
3. Usado para animações mais simples (botões, menus suspensos e assim por diante)
4. Mais fácil de criar, mas não tantas possibilidades de animação / efeito

Animation @keyframes:

1. Pode ser usado para animações sem fim
2. Pode definir mais de 2 estados
3. Sem limites

Ambos usam a aceleração da CPU para um efeito muito mais suave.

1. A animação exige muito mais código, a menos que você esteja usando a mesma transição repetidamente; nesse caso, uma animação seria melhor.

2. Você pode ter efeitos diferentes para entrar e sair sem uma animação. Apenas tenha uma transição diferente na regra original e na regra modificada:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }
   

3. As animações são apenas abstrações de transições; portanto, se a transição for acelerada por hardware, a animação será. Não faz diferença.

4. Ambos são muito modernos.

5. Minha regra geral é que se eu usar a mesma transição três vezes, provavelmente deve ser uma animação. Isso é mais fácil de manter e alterar no futuro. Mas se você estiver usando apenas uma vez, é mais digitado para criar a animação e talvez não valha a pena.

As animações são exatamente isso - um comportamento suave do conjunto de propriedades. Em outras palavras, especifica o que deve acontecer com um conjunto de propriedades do elemento. Você define uma animação e descreve como esse conjunto de propriedades deve se comportar durante o processo de animação.

As transições do outro lado especificam como uma propriedade (ou propriedades) deve executar suas alterações. Cada mudança. Definir um novo valor para determinada propriedade, seja com JavaScript ou CSS, é sempre uma transição, mas, por padrão, não é suave. Ao definir transitionno estilo css, você define uma maneira diferente (suave) de executar essas alterações.

Pode-se dizer que as transições definem uma animação padrão que deve ser executada toda vez que a propriedade especificada for alterada.

Existe algo que pode ser dito sobre desempenho. Ambos aproveitam a aceleração h / w?

Em navegadores modernos, h / aceleração w ocorre para as propriedades filter, opacitye transform. Isso é para animações CSS e transições CSS.

Acredito que a animação CSS3 vs transição CSS3 lhe dará a resposta que você deseja.

Basicamente, abaixo estão alguns tópicos:

1. Se o desempenho for uma preocupação, escolha transição CSS3.
2. Se o estado deve ser mantido após cada transição, escolha transição CSS3.
3. Se a animação precisar ser repetida, escolha animação CSS3. Porque ele suporta contagem de iteração de animação.
4. Se uma animação complicada é desejada. A animação CSS3 é preferida.

Não se incomode com o que é melhor. A minha opinião é que, se você puder resolver seu problema com apenas uma ou duas linhas de código, faça-o em vez de escrever vários códigos que resultarão em comportamento semelhante. Enfim, a transição é como um subconjunto de animação. Significa simplesmente que a transição pode resolver certos problemas, enquanto a animação, por outro lado, pode resolver todos os problemas. A animação permite que você tenha o controle de cada estágio, começando de 0% a 100%, algo que a transição não pode realmente fazer. A animação exige que você escreva vários códigos enquanto a transição usa uma ou duas linhas de código para executar o mesmo resultado, dependendo do que você está trabalhando. Vindo do ponto do JavaScript, é melhor usar a transição. Qualquer coisa que envolva apenas duas fases, isto é, iniciar e terminar, usa a transição. Resumo, se for estressante, não