Animações com CSS3 | Animations with CSS3

- SorocabaCSS 3ª edição (12/05/2018)

Transcript

1. ANIMAÇÕES COM CSS3
2. juliana negreiros @juunegreiros
3. Por que usamos animações?
4. Comunicação: o mundo é movimento!
5. reações à ações importam
6. Era uma vez...
7. E então o Hover aconteceu!
8. E COM ELE UM MUNDO NOVO REPLETO DE OPORTUNIDADES PARA INOVAR A ENTREGA DE INFORMAÇÕES PARA O USUÁRIO <3
9. MICROINTERAÇÕES
10. CARROSSEL
11. BOTÕES DE STATUS
12. LOADING
13. MENU HAMBÚRGUER
14. QUANDO USAMOS ANIMAÇÕES?
15. ANIMAÇÕES TEM QUE TER UM PROPÓSITO!
16. DESTACAR LOCAIS QUE possuam INTERAÇÕES
17. adicionar e remover arquivos
18. contar histórias
19. chamar atenção
20. SEM EXAGEROS!
21. DIVERTIR O USUÁRIO!
22. POR QUE CSS AO INVÉS DE JS?
23. SE SUA ANIMAÇÃO QUEBRAR, SÓ A SUA ANIMAÇÃO QUEBROU
24. VELOCIDADE DE PROCESSAMENTO
25. MANUTENÇÃO
26. COMO ANIMAR AS COISAS?
28. transition
29. .botao { background-color: red; transition: background-color 2s fade-in; } .botao:hover { background-color: blue; }
30. Quando usar?
31. propriedades transition: propriedade duração time-function delay;
32. Duration .botao { transition-duration: 2s; }
33. timing function .botao { transition-timing-function: ease; }
35. delay .botao { transition-delay: 1s; }
36. animations
37. @keyframes animar { 0%{ transform: scale(1); } 50% { transform: scale(1.5); } 100%{ transform: scale(.5); } } .botao { animation: animar 1s; }
38. Quando usar?
39. propriedades
40. name .botao { animation-name: animar; }
41. duration .botao { animation-duration: 2s; }
42. timing function .botao { animation-timing-function: ease; }
43. Delay .botao { animation-delay: 0s; }
44. iteration count .botao { animation-iteration-count: 1; }
45. direction .botao { animation-direction: normal; }
46. fill mode .botao { animation-fill-mode: none; }
47. play state .botao { animation-play-state: running; }
48. transform
49. matrix translate scale rotate perspective
50. filter
51. por onde começar?
52. o que eu quero fazer?
54. de quais elementos vou precisar?
55. quais movimentos meus elementos irão fazer?
56. Codepen
57. animações com svg
58. scalable vector graphics
59. coordenadas
61. js + css
62. controlar estados da animação
63. codepen
64. can i use
65. aceitação
66. não esqueça dos prefixos <3
67. referências
68. youmightnotneedj s caniuse css-tricks
69. obrigada!