Efeito “float” e “sink”, flutuar e afundar com CSS 3

Como fazer o efeito “float” e “sink”, flutuar e afundar com CSS 3 utilizando as propriedades transform e transition-duration.

Com as propriedades transform e transition-duration conseguimos simular o efeito de flutuar e afundar ou subir e descer em um elemento qualquer em sua página, Div, Input, etc, veja os exemplos abaixo:

Exemplos efeito Float e Sink

Exemplo com Float “flutuar”

Agora o exemplo com Sink “afundar”

Código CSS necessário

.float {
  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.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.sink {
  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.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sink:hover, .sink:focus, .sink:active {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

Ajuste as propriedade transform: translateY(-8px); para aumentar a quantidade de pixel que o elemento deverá subir ou descer.

Já para alterar a velocidade de execução da animação mude  transition-duration informando o novo valor desejado em segundos.

CSS “minify”

CSS já com o tamanho reduzido para você incluir no seu projeto.

.float,.sink{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.float{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.float:active,.float:focus,.float:hover{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.sink{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sink:active,.sink:focus,.sink:hover{-webkit-transform:translateY(8px);transform:translateY(8px)}