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)}