Animações com

Gabriel Prates

Um pouco de história

Como chegamos até aqui?

Um pouco de história

GIF (Graphics Interchange Format)

Criado em 1987

Um pouco de história

Adobe Shockwave Player

Lançado em 1995

Um pouco de história

Adobe Flash Player

Lançado em 1996

Um pouco de história

HTML5 e CSS3

Começaram a ser escritos em 2008, e estão se desenvolvendo até hoje.

Vamos lá

CSS Animations

O CSS3 possibilita a criação de efeitos de animações e transições.

 

Basicamente você consegue controlar as características do objeto e suas diversas transformações definindo fases da animação.

 

Ex.: http://codepen.io/gabsprates/pen/OXpRQq

CSS Animations

animation-name

Indica qual os conjuntos de @keyframes a animação pertence.

.caixa {
    width: 50px;
    height: 50px;

    animation-name: rodar;
}

@keyframes rodar {
    0% {
        background-color: #000;
    }
    100% {
        background-color: #fff;
    }
}

CSS Animations

animation-duration

Configura o tempo de execução da animação, até completar um ciclo.

.caixa {
    width: 50px;
    height: 50px;

    animation-name: rodar;
    animation-duration: 2s;
}

@keyframes rodar {
    0% {
        background-color: #000;
    }
    100% {
        background-color: #fff;
    }
}

CSS Animations

animation-iteration-count

Configura a quantidade de vezes que a animação acontece. Pode ser 'infinite'.

 

.caixa {
    width: 50px;
    height: 50px;

    animation-name: rodar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* 'infinite' indica que não tem limite de vezes */
}

@keyframes rodar {
    ...
}

CSS Animations

animation-direction

Configura o percurso da animação.

.caixa {
    ...
    animation-name: rodar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;

/*  
'normal': segue a linha do tempo;

'alternate': segue a linha do tempo e faz o caminho inverso,
    para voltar ao ponto inicial;

'reverse': começa de trás para frente;

'alternate-reverse': começa de trás para frente e faz o
    caminho inverso.
*/
}

CSS Animations

animation-timing-function

Configura a progressão da animação.

.caixa {
    ...
    animation-name: rodar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
}

Veremos exemplos em: http://easings.net/pt

CSS Animations

animation-delay

Configura o tempo de atraso para o início da animação.

.caixa {
    ...
    animation-name: rodar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-delay: 2s
}

Mãos à obra!!

Made with Slides.com