Animações em CSS - Codamos - CPBR 2019

Apresentação do Workshop de Animação em CSS, que aconteceu no dia 15/02/2019 na bancada da Codamos, durante a Campus Party 2019.

Transcript

1. Animações em CSS Fazendo mágica no Navegador
2. O que vamos ver hoje • Contexto geral • Teoria básica da animação • Animações no CSS • Prática Ref: http://alimacdoodle.com/gifs/
3. Mellina Yonashiro Desenvolvedora Front-end, que também é designer e ama jogos e audiovisual. Seu hobby era fazer vídeos e animações durante a faculdade (não me procurem no Youtube/Vimeo)
4. Pré-requisitos • Básico de HTML e CSS • Possuir algum editor de texto (Visual Studio Code, Atom, Sublime Text etc) • Vontade de animar as coisas!
5. Contexto Geral
6. Ref: https://medium.com/@moeamaya/getting-start ed-with-web-animation-f9abcf299ee4
7. Codepen
8. Google Material Design
9. Adobe Flash era a solução, porém… • Havia problemas com segurança • Não tem suporte em devices mobile • Software fechado • Ferramentas abertas se consolidavam Antes do HTML5 e CSS3
10. Nossa abordagem Ref: Wikipedia Uso de propriedades lapidadas desde a versão do CSS3 e HTML5.
11. https://github.com/yogmel/workshop-animacao Baixem os arquivos para o nosso workshop
12. Teoria da Animação
13. Início, meio ou fim? Na animação, o meio é o protagonista, que é o conjunto de estados (imagens) e tempo. A B Animação ocorre
14. Podemos alterar várias características pra criar uma animação: • Posição • Tamanho • Rotação • Opacidade ...
15. Animações em CSS
16. :Hover e Transition Hover acontece quando o mouse está sobre um elemento. Ele é o estado. :hover é uma pseudo-classe no CSS. Transition determina em quanto tempo a mudança de estado ocorre. Transition é uma propriedade no CSS. Ref: http://kb.website.com/knowledge-base/customizing-button-hover- state-mouseover-effects
17. No CSS: /* ESTADO INICIAL: botão */ .btn { background-color: red; } /* ESTADO HOVER: botão */ .btn:hover { background-color: black; } A B
18. No CSS: /* ESTADO INICIAL: botão */ .btn { background-color: red; transition: .5s all; } /* ESTADO HOVER: botão */ .btn:hover { background-color: black; } A B Elemento tempo
19. Prática Hover em botão
20. Animações mais complexas - Animation e @keyframes Para animações com mais de dois estados e que não precisem de interação direta com o elemento, precisamos usar o animation + @keyframes. E se eu quiser fazer isso? Ref: https://giphy.com/gifs/motionartsmedia-animation-design-1w oAIetDOL2F5y41dG
21. Definindo a animação: @keyframes Primeiro, declaramos as regras da animação, ou seja, que características vão mudar e quando. Anatomia: @keyframes nomeDaAnimacao { from { /* ESTADO INICIAL */ } to { /* ESTADO FINAL*/ } }
22. Definindo a animação: @keyframes Anatomia: @keyframes nomeDaAnimacao { from { /* ESTADO INICIAL */ background-color: red; } to { /* ESTADO FINAL*/ background-color: black; } } Ou: @keyframes nomeDaAnimacao { 0% { /* ESTADO INICIAL */ background-color: red; } 100% { /* ESTADO FINAL*/ background-color: black; } }
23. Chamando a animação: animation Agora, precisamos chamar a animação, ou seja, fazê-la rodar. Dentro do elemento que vai ser animado, se deve chamar a animação criada no @keyframes a partir da propriedade animate. Anatomia: .seletor { animation: nomeDaAnimacao duracao; }
24. Propriedades de Animation • animation-name: nome da animação como foi declarada no keyframe • animation-duration: duração da animação (em segundos ou milisegundos) • animation-timing-function: curva de animação • animation-delay: tempo de espera antes da animação iniciar
25. Propriedades de Animation • animation-iteration-count: número de vezes que essa animação vai rodar • animation-direction: determina se a animação roda de trás pra frente ou vice-versa • animation-fill-mode: se o estado inicial e/ou final devem se manter depois e antes que animação não estiver rodando • animation-play-state: se a animação está rodando ou não
26. Prática Keyframes em 3 estados
27. Prática Animação de múltiplos elementos
28. Obrigada! /yogmel Mellina Yonashiro - /yogmel mellinay@yousea.me