Animações com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395617/images/2363603/1458283478_css3.png)
Gabriel Prates
Um pouco de história
Como chegamos até aqui?
Um pouco de história
GIF (Graphics Interchange Format)
Criado em 1987
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395617/images/2363681/9yQUnV.gif)
Um pouco de história
Adobe Shockwave Player
Lançado em 1995
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395617/images/2363689/Adobe-Shockwave-Player.png)
Um pouco de história
Adobe Flash Player
Lançado em 1996
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395617/images/2363693/1458285363_Adobe_Flash_Player.png)
Um pouco de história
HTML5 e CSS3
Começaram a ser escritos em 2008, e estão se desenvolvendo até hoje.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395617/images/2363713/HTML5-and--006.jpg)
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
Animações com CSS 3
- 1,366