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.

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.

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}