When it comes to transforming elements, remember that span is an inline element by default and cannot perform a transformation on its own. To enable transformation, you can either add display: inline-block to your animation or apply it directly to the span element.
Understanding Transformable Elements
A transformable element falls into one of these categories:
- An element whose layout is determined by the CSS box model, such as block-level or atomic inline-level elements.
- An element in the SVG namespace that does not follow the CSS box model but has attributes like transform, patternTransform, or gradientTransform.
For more information, refer to: https://drafts.csswg.org/css-transforms-1/#terminology
<span> in HTML serves as a generic inline container for phrasing content without any inherent meaning. It can be useful for styling purposes (using classes or ids) or when sharing attribute values like lang. However, it should only be used when no other semantic element is suitable. Remember, although similar to <div>, <span> is an inline element unlike <div>, which is a block-level element.
Learn more at: https://developer.mozilla.org/en/docs/Web/HTML/Element/span
Option 1: Add Shake Effect on Hover
$(document).ready(function () {
$(".animation").addClass("animated shake");
});
.shake:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
display: inline-block;
}
@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);
}
}
Option 2: Continuous Shake Animation
$(document).ready(function () {
$(".animation").addClass("animated shake");
});
.shake {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
display: inline-block;
}
@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);
}
}