Como criar animações CSS3 com stylie

Obtendo uma animação CSS3 apenas direito pode ser difícil. Cada desenvolvedor tem habilidades diferentes e maneiras de tarefas de observação. stylie é projetado para desenvolvedores que são orientados visualmente mais. Você escolhe um ponto inicial e final para a animação, usando os valores de X e Y.

O valor R determina a quantidade de rotação que o objeto animado executa. Você pode escolher quanto tempo a animação ocorre utilizando os valores de tempo. Além disso, o X, Y valores, e R podem cada um ter um efeito de animação associada com eles.

Muitas animações mover-se em mais do que uma direcção. Clique no sinal de mais (+) para adicionar outra direção. Esta orientação também tem X, Y e valores de R e você pode definir os seus efeitos de duração e especiais também. Em suma, você pode usar essa interface para criar efeitos incrivelmente complexos de animação que vão em mais de uma direção.

O guia Movimento define características da animação, tais como quantas vezes você deseja que a animação para executar (você pode optar por fazer a execução de um loop infinito) e como o objeto que você está animando deve interagir com o caminho de animação.

Este também é o guia que você usa para definir a flexibilização usado para fazer o efeito animado fluir sem problemas. Uma animação de linha reta é simples, mas a flexibilização torna-se importante quando você começar a trabalhar com animações que se movem em mais de uma direção.

Após terminar de configurar sua animação, você clique na guia CSS, que contém o CSS que você usa para criar o efeito de animação na sua aplicação. A guia CSS permite que você escolha um nome para a classe de animação. Você também pode selecionar quais fornecedores para incluir como parte do CSS eo nível de qualidade de animação.

A guia HTML contém tags de exemplo que você precisa para completar a animação. Isto é onde você precisa fazer modificações para incluir o objeto que você deseja animar no lugar do círculo simples fornecido pela stylie.