Transições

CSS
Prof.ª Daiani Melo
Linha do tempo CPROJ
Cores, Gif
1º Bimestre -
formas - animado
Composição Fireworks Fireworks

2º Bimestre - Projeto: Projeto:

Projeto Briefing Wireframe

3º Bimestre – Projeto de Criação de

Composição imagens imagens
e Projeto para site para site

4º Bimestre –
Transições Animações
Animação
O que são Transições?
• Uma transição ocorre quando um elemento muda de um estado
para outro e o navegador preenche essa mudança de estado com
uma sequência de quadros intermediários.
• Possui um início e um estado final.

• É comum vermos transições sendo usadas para criação de efeitos

com hover, ou quando algo é adicionado e/ou removido na
página. O efeito do hover pode ser uma mudança sutil na cor da
fonte e a informação na página pode surgir na tela.
Como usar transições CSS?

• Para criar um efeito de transição, você deve especificar

duas coisas:

• a propriedade CSS à qual você deseja adicionar um efeito

• a duração do efeito

• Nota: Se a parte da duração não for especificada, a

transição não terá efeito, porque o valor padrão é 0.
 Exemplo 1

• Foi criado um botão com:

• Largura: 100px
• Altura: 50px
• Sem borda
• Cor do texto: Branco
• Cor do fundo: azul
• A TRANSIÇÃO SERÁ APLICADA NA
LARGURA DO OBJETO E TERÁ A
DURAÇÃO DE 1SEGUNDO

• O EFEITO IRÁ OCORRER AO PASSAR O

MOUSE (HOVER) SOBRE O BOTÃO.
 Exemplo 2

• Foi criado um botão com:

• Largura: 100px
• Altura: 50px
• Sem borda
• Cor do texto: Branco
• Cor do fundo: castanho
• A TRANSIÇÃO SERÁ APLICADA NA
ALTURA DO OBJETO E TERÁ A
DURAÇÃO DE 0.5 SEGUNDO

• O EFEITO IRÁ OCORRER AO PASSAR O

MOUSE (HOVER) SOBRE O BOTÃO.
 Exemplo 3

• Foi criado um botão com:

• Largura: 100px
• Altura: 50px
• Sem borda
• Cor do texto: Branco
• Cor do fundo: preto
• A TRANSIÇÃO SERÁ APLICADA NA ALTURA E
NA LARGURA DO OBJETO

• O EFEITO IRÁ OCORRER AO PASSAR O

MOUSE (HOVER) SOBRE O BOTÃO.
Exemplo 4 - usando imagem no botão
Transição e Transformação
• A propriedade transform, permite especificar a rotação do
objeto em graus.
• Exemplo: transform: rotate(360deg);
 Exemplo 5
Foi criado um botão com:
• Largura: 100px
• Altura: 100px
• Sem borda
• Cor do texto: Branco
• Cor do fundo: verde
• A TRANSIÇÃO SERÁ APLICADA NA ALTURA E
NA LARGURA DO OBJETO. TAMBÉM NA
ROTAÇÃO DO OBJETO.

• O EFEITO IRÁ OCORRER AO PASSAR O

MOUSE (HOVER) SOBRE O BOTÃO.
• ELE TAMBÉM IRÁ GIRAR 360°
Exemplo6 - rotação usando imagem
Atividades Propostas
• Realize os exemplos apresentados nos slides.