/* Icon Wobble Horizontal */ @include keyframes(#{$nameSpace}-icon-wobble-horizontal) { 16.65% { @include prefixed(transform, translateX(6px)); } 33.3% { @include prefixed(transform, translateX(-5px)); } 49.95% { @include prefixed(transform, translateX(4px)); } 66.6% { @include prefixed(transform, translateX(-2px)); } 83.25% { @include prefixed(transform, translateX(1px)); } 100% { @include prefixed(transform, translateX(0)); } } @mixin icon-wobble-horizontal { @include hacks(); @include prefixed(transition-duration, $mediumDuration); .hvr-icon { @include prefixed(transform, translateZ(0)); } &:hover, &:focus, &:active { .hvr-icon { @include prefixed(animation-name, #{$nameSpace}-icon-wobble-horizontal); @include prefixed(animation-duration, 1s); @include prefixed(animation-timing-function, ease-in-out); @include prefixed(animation-iteration-count, 1); } } }