CSS wiggle/shake effect

Question

Эффект, который я собираюсь сделать: -wiggle несколько раз и прекратить шевелить. Делайте это поведение периодически, пока мышь не наведет. -На ходу, покачивание движения полностью прекращается. -все переходы сглажены. Я пробовал с ключевыми кадрами -webkit-animation, но используя -webkit-animation-timing-функцию, чтобы облегчить переход, когда мышь зависала, не работала. Кроме того, я теряюсь на том, как добиться движения по периоду: покачивать, останавливать и покачивать. Я был бы признателен, если бы вы могли указать в правильном направлении.

Answer 1

Попробуйте один из следующих действий:

.class:hover { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    10%, 90% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    20%, 80% { 
    transform: translate3d(2px, 0, 0); 
    } 

    30%, 50%, 70% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    40%, 60% { 
    transform: translate3d(4px, 0, 0); 
    } 
} 

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

или Добавьте это в скрипте: <link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>

и добавить класс к элементу вы хотите встряхнуть

Полная документация здесь: https://elrumordelaluz.github.io/csshake/

Answer 2

Вот простая анимация покачивания, которая останавливается, когда вы наводите на нее курсор.

Для того, чтобы добиться задержек между колебаниями, вы можете просто включить «пустой кусок» анимации ... то есть период, в течение которого ничего не меняется. В моем примере ничего не меняется между отметкой 0% и 80%, а «покачивание» происходит только в последних 20% (что заканчивается на половину секунды).

@keyframes wiggle { 
 
    0% { transform: rotate(0deg); } 
 
    80% { transform: rotate(0deg); } 
 
    85% { transform: rotate(5deg); } 
 
    95% { transform: rotate(-5deg); } 
 
    100% { transform: rotate(0deg); } 
 
} 
 

 
h1.wiggle { 
 
    display: inline-block; 
 
    animation: wiggle 2.5s infinite; 
 
} 
 

 
h1.wiggle:hover { 
 
    animation: none; 
 
}

<h1 class="wiggle"> 
 
    wiggle, wiggle 
 
</h1>

К сожалению, это не учитывает «ослабление» обратно в ун-пошевелила состояния при наведении на него в середине анимации. Для этого может потребоваться немного JavaScript.