Keyframes

W3 Schools CSS Animations
animation-timing-function

    @Keyframes com translate:
    • Define-se de onde vamos começar com o 0%, o que vai acontecer no meio com o 80% e o que vai acontecer no final, com 100%:
      @keyframes moveInLeft{
      0% {
      opacity: 0;
      transform: translateX(-100px);
      }

      80% {
      transform: translateX(10px);
      }

      100% {
      opacity: 1; //começa em 0 e vai até 1, para ter um efeito.
      transform: translate (0); (para continuar onde está)
      }
      }

    • Queremos que o elemento seja exibido em 0%, 80% e em 100%. Lembrando que pode ter várias transições.
    • Começa a animação a -100px da posição original e no final vai estar a 0px da posição original, portanto, estara no centro.
    • Para fazer o outro lado, será 100px e 0px, pois ele irá começar a 100px positivo (direita) da origem e no final estará a 0px da origem.
    • Portanto, no 80%, ele está com 10px para dar o fadeIn entrando pela esquerda a -100px da origem, ir até 10px a mais que a origem, e terminar em 0px da origem. Com isso, criou-se um efeito de passar reto e voltar.
    • Adicionar o nome da animation em alguma classe com animation-name e animation-duration.
    • Pode ser que o elemento que contém uma animação em cima mexa ao realizar uma animação, por isso geralmente usa-se o backface-visibility: hidden; no elemento que está acima da sua animação (a div acima da que a animação está).
    • Utiiliza-se translateX quando mexendo no eixo X e translateY quando mexendo no eixo Y.

    • animation-timing-function:
      ease-in: começa devagar e fica mais rápida no final.
      ease-out: começa rápida e fica mais devagar no final.
      It is possible to create different timing functions, explained at: animation-timing-function

    Exemplo final do @Keyframes de translation:

    Outdoors Is where life happens


    @Keyframes Examples

    Having more than one animation:
    • Add the second animation after a comma.
    • animation: drive 3s both infinite linear,
                            jump 0.3s 1.2s ease;

    Animation Shorthand
    • Animation: name, time, timing-function (ease-in), delay.
    • Animation: name, time, timing-function, delay, iteration-count, fill-mode.
    • Os quatro primeiros são padrões, caso tenha um deles, precisa ser colocado nessa ordem.

    Animation-fill-mode property.
    • Basicly tells the CSS what to do with any element that we are animating outside of the animation window, meaning, before it starts animating and after it finishes animating.
    • Sintax: animation-fill-mode: value value value value;
    • Examples:
      a) none (default): do nothing outside the animation window, once it's finished return the animation to it's original state (definido fora do keyframes).
      b) forwards: pega o último elemento da animation e aplica ao elemento, para que então ele fique parado na última ação da animação.
      c) backwards: whatever the starting animation is, I want to apply that animation to the element before the animation kicks in. Com isso, no caso de um botão ter uma animação em que ele sobe para a página lentamente, ele não irá aparecer na tela e depois sumir e começar a subir lentamente, ele irá aparecer na tela já no primeiro estado da animação.
      d) both: applies backwards and fowards.

    animation-iteration-count
    • Sintaxe: animation-iteration-count: number; or infinite;
    • Utiizada para realizar uma animação por uma contagem de vezes.

    animation-direction
    • Sintaxe: animation-direction: direction;
    • Examples:
      a) normal: segue o fluxo da animação normal.
      b) reverse: segue o fluxo da animação de maneira invertida, ao invés de from>to fica to>from.
      c) alternate: começa em from>to, depois to>from, from>to, to>from e continua assim nessa alternação.
      d) alternate reverse: começa em ao contrário, de to>from, depois from>to, to>from, from>to e continua nessa alternação.

    animation-timing-function
    • Sintaxe: animation-direction: direction;
    • Examples:
      a) ease: specifies a transition effect with a slow start, then fast, then end slowly (this is default).
      b) linear: specifies a transition effect with the same speed from start to end.
      c) ease-in: specifies a transition effect with a slow start.
      d) ease-out: specifies a transition effect with a slow end.
      e) ease-in-out: specifies a transition effect with a slow start and end.
      f) cubic-bezier(number, number, number, number): lets you define your own values in a cubic-bezier function.
      ** You can make some cubic-bezier here: Cubic Bezier
      ** A parte de baixo é o tempo que leva para realizar, para cima significa a progressão (começo, meio, fim), então se no meio a curva for reta, singifica no meio da animação, será bem devagar a transition.

    Mario Driving Example
    • @keyframes drive {
      from {transform: translateX(0);}
      to {transform: translateX(700px);}
      }
    • Utilizando o animation-fill-mode: forwards para ele continuar com a última animação (ou seja, ficar parado no final da animação ao invés de resetar onde estava).
    • Utilizar a animation-iteration-count para ele repetir a animação quantas vezes quisermos, para ele continar andando na rua.