Como criar uma simples animação de ondulação “wobble” no CSS 3 utilizando keyframes e propriedades como transform e animation-duration.
Exemplo animação de ondulação
Efeito de ondulação vertical
Efeito de ondulação horizontal
CSS utilizado para ondulação vertical
A animação é executada em 6 passos, altere os valores em translateY(…px) para ajustar o movimento.
Para alterar a velocidade dos movimentos mude o valor de animation-duration (valor em segundos).
@-webkit-keyframes wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active { -webkit-animation-name: wobble-vertical; animation-name: wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
Ondulação horizontal
@-webkit-keyframes wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active { -webkit-animation-name: wobble-horizontal; animation-name: wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
Caso você tenha alguma dúvida em como customizar a animação, fique a vontade para fazer um comentário.
Versões reduzidas
CSS reduzido da animação vertical:
@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.wobble-vertical{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.wobble-vertical:active,.wobble-vertical:focus,.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}
Apenas com a animação horizontal:
@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.wobble-horizontal{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.wobble-horizontal:active,.wobble-horizontal:focus,.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}