CSS3 - Transitions

O que são CSS3 transitions? Por que e como usar esse recurso para criar interfaces mais ricas.

Transcript

1. CSS 3 Transitions V i c e n t e M u n d i m
2. Por que?
3. Quero mover um elemento para a direita... .box { position: absolute; left: 0; }
4. Uhmm... Sem graça, não curti :( .box { position: absolute; left: 0; } .box { position: absolute; left: 200px; }
5. Agora, com transitions! .box { position: absolute; left: 0; transition: left 1s ease-in-out; } .box { position: absolute; left: 200px; } Muito melhor!
6. Agora, com transitions! .box { position: absolute; left: 0; transition: left 1s ease-in-out; } .box { position: absolute; left: 200px; } Muito melhor!
7. Como definir transition-property: Propriedade que terá a transição transition-duration: Duração em segundos ou milisegundos da transição transition-timing-function: Função que determina como os valores são computados. transition-delay: Tempo até que a transição comece a acontecer
8. Definindo no CSS .all { transition: all 1s ease-out; } .left { transition: left 1s ease-in 0.5s; } .right.bottom { transition-property: right, bottom; transition-delay: 0.5s; transition-duration: 1s; transition-timing-function: ease-out, ease-in; }
9. O que pode ser alterado Cores em geral (background-color, border- color, color, etc) Largura, altura, posicionamento (left, right, top, bottom), margem, padding. Tamanhos de fonte, line-height, word- spacing, etc https://developer.mozilla.org/en-US/docs/ Web/CSS/CSS_animated_properties
10. Quem pode ser alterado Praticamente qualquer elemento que possa ter alguma propriedade animada.
11. Gotchas Propriedade display, ou como fazer um fade in/out. Onde colocar a propriedade transition?
12. Compatibilidade http://caniuse.com/#feat=css-transitions
13. Resources https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ Using_CSS_transitions http://blog.alexmaccaw.com/css-transitions http://www.css3maker.com/css3-transition.html
14. Obrigado!