Como criar animações css3 com stylie

Obtendo uma animação CSS3 apenas para a direita pode ser difícil. Cada desenvolvedor tem habilidades diferentes e maneiras de tarefas de observação. stylie

é projetado para desenvolvedores que estão mais orientados visualmente. Escolher um ponto inicial e final para a animação, usando os valores de X e de Y.

Video: Criando uma animação com CSS - Style: Social Spirit

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, os valores de Y e R podem cada um ter um efeito de animação associada com eles.

Video: Animações com CSS

Muitas animações mover-se em mais de uma direção. Clique no sinal de mais (+) para adicionar outra direção. Esta direcção também tem X, Y, e os valores de R e pode definir os seus efeitos especiais e duração bem. 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, 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. A animação 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.

Video: Aprendendo a criar CSS - animespirit

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


Publicações relacionadas