Fazer download em pdf ou txt
Fazer download em pdf ou txt
Você está na página 1de 12

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.

Você também pode gostar