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}