Efeitos Bounce In e Bounce Out com CSS

Como criar os efeitos de Bounce In e Bounce Out utilizando CSS.

criando os efeitos de Bounce In e Bounce Out com CSS

A animação utilizada no efeito “Bounce” está divida em “in” e “out”, aonde o “in” será utilizado para destacar o elemento e o “Out”, sendo a sua animação oposta.

Exemplos

Exemplo com Bounce In

Passe o mouse

CSS do efeito “Bounce In”

.ef-bounce-in {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.ef-bounce-in:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

Exemplo do Bounce Out:

Passe o mouse

Efeito “Bounce Out”

.ef-bounce-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.ef-bounce-out:hover{
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

Versão comprimida dos efeitos Bounce In e Bounce Out (tamanho reduzido):

.ef-bounce-in{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;-webkit-transition-duration:.5s;transition-duration:.5s}.ef-bounce-in:hover{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)}.ef-bounce-out{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;-webkit-transition-duration:.5s;transition-duration:.5s}.ef-bounce-out:hover{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)}

 

 

Resumo
Bounce In e Bounce Out utilizando CSS
Nome do Artigo
Bounce In e Bounce Out utilizando CSS
Descrição
Como criar os efeitos de Bounce In e Bounce Out utilizando CSS
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *