Dando vida para aplicações Web

Mario Souto Silva

Desenvolvedor Front end

mariosouto.com / @soutomario

Já salvei a princesa

  • Facebook /soutomario
  • GitHub /soutomario
  • Twitter @soutomarios




#NetCodersCSS

Legal pra [email protected]!#$(*@ né?

Qual a diferença entre esses dois sites?

Como podemos melhorar?

Com flash!

NOOOO GOD PLEASE NO!

HTML e CSS

Então vamos lá baby-metas

Qual a forma mais simples de fazer animações com CSS?

Hover

            

Animações são trocas de estados

Transition

            

Transition

            

Como animar de um lado para o outro?

Como mexer com a posição de elementos no CSS?

Position!

Position

            

Será que o position é a melhor forma de fazer isso?

Transform

            

Translate

            

Zoom: Width Height

            

E se eu quiser fazer isso com um texto?

Zoom: Texto

Título Crescente

            

Qual o problema desse formato?

Scale

            

Scale + Rotate

            

Como recriar esse efeito na nossa land page?

Skew: De Volta para o Futuro

            

Animações "Automáticas"

Animação é a palavra chave



.elemento {
  animation: "animation-name" "duration" ;
}

E tudo começa no FPS

Não é First Person Shooter então, fechem o CS 1.6 ai

Frames Per Second

Como aplicar isso no CSS?

KeyFrames

            

"Mas no gif eu tinham bem mais frames, como eu chego naquele resultado?"

KeyFrames: Porcentagem

            

O que tem de errado com essa animação?

Ela não se repete

Iteração (Repetição)

            

Ainda falta algo, reparem ela vai do inicio ao fim e depois volta para o começo.

animation-direction

            

Como animar no Scroll?

AnimusJS

https://github.com/soutomario/animusjs

Mão na massa!

Dicas Finais

Dicas Finais

Melhor guia de animações em PT-BR:

https://github.com/daliannyvieira/css-animations-pocket-guide

OBRIGADO!

https://goo.gl/7klWob