
Utilizando @keyframes e transições
Professor(a): Marianni e Kawan
Hoje os alunos puderam ver como as animações são usadas no CSS para deixar um site mais interativo e animado, começamos com uma introdução sobre como podemos utilizar transições como “:hover” e logo passamos a entender como as “@keyframes” funcionam. Após essa introdução teórica e demonstrativa onde o professor Kawan mostrou aos alunos como utilizamos essas funcionalidades, pudemos passar para as atividades, onde os alunos colocariam na prática aquilo que aprenderam. Desde fazer animações a fim de deixar itens com a aparência de pulsar, até fazer um ícone de carregamento puramente com HTML e CSS. Os alunos pareciam se divertir ao ver o resultado visual daquilo que colocaram em seus arquivos CSS e HTML, pude auxiliá-los com suas diferentes dúvidas, alguns alunos tiveram dificuldades em centralizar elementos na tela. No caso, tive apenas que mostrar uma solução simples, utilizando o estilo “text-align: center” para ajudá-los. Os alunos dos quais ajudei parecem estar indo bem, tendo apenas dificuldade em lembrar de todos os estilos que vimos até agora, o que é natural já que vimos bastante conteúdo, mas conseguem tornar suas ideias em realidade rapidamente com uma ajudinha dos monitores. A maioria dos alunos fizeram até a quarta atividade, sendo que eram seis, com a finalização da aula alguns alunos já entregaram suas atividades e tivemos o fim da aula.