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.
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!!
Animações com CSS 3
By Gabriel Prates
