Como criar o efeito de flutuação continua utilizando CSS 3

Como criar o efeito de flutuação continua com CSS 3 utilizando “keyframes”, “transform”, “animation-delay” e mais algumas propriedades.

efeito de flutuação utilizando CSS

CSS 3 possibilita a criação de vários tipos de animação, recursos como o “keyframes” possibilitam a criação de animações complexas de forma fácil e objetiva.

Exemplos

Exemplo de “flutuação” continua, deixei o mouse encima para executar o efeito continuamente.

Passe o mouse

CSS utilizado:

@-webkit-keyframes bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@-webkit-keyframes bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
.bob {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.bob:hover, .bob:focus, .bob:active {
-webkit-animation-name: bob-float, bob;
animation-name: bob-float, bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}

Ajuste os valores

Altere os valores em pixel dentro dos percentuais (0%, 50%, …) do translateY(-8px) para alterar a quantidade de pixels que o elemento será movido.

0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }

50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); }

100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }

Altere animation-duration: .3s, 1.5s; para ajustar a velocidade de execução da animação, 3s é para primeira animação de “0%” até “50%”, 1.5s é para a segunda parte que vai de “50%” até “100%”.

CSS “minificado” do efeito de flutuação para você incluir no seu projeto:

@-webkit-keyframes bob{0%,100%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}50%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}}@keyframes bob{0%,100%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}50%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}}@-webkit-keyframes bob-float{100%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}}@keyframes bob-float{100%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}}.bob{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.bob:active,.bob:focus,.bob:hover{-webkit-animation-name:bob-float,bob;animation-name:bob-float,bob;-webkit-animation-duration:.3s,1.5s;animation-duration:.3s,1.5s;-webkit-animation-delay:0s,.3s;animation-delay:0s,.3s;-webkit-animation-timing-function:ease-out,ease-in-out;animation-timing-function:ease-out,ease-in-out;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-direction:normal,alternate;animation-direction:normal,alternate}

 

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 *