如何为div内的span元素添加摇动动画

Question

 <div id="about-desc">
    <p>
 Lorem ipsum dolor sit <span class="animation">amet</span>, consectetur adipisicing elit. <span class="animation"> Officia reprehenderit</span>, <span class="animation"> sit eligendi</span> deserunt, blanditiis quas porro omnis provident quidem voluptate! Fugit ipsa mollitia, atque commodi asperiores, rerum dicta ratione aut.
    </p>
 </div>

$(document).ready(function () { 
  $(".animation").addClass("animated shake");
});

我无法弄清楚我到底错在哪里。当我向 div 元素添加动画时，它工作正常，但 span 元素没有发生这种情况？有人可以解释如何解决这个问题

Answer 1

span 默认情况下是内联元素，因此无法执行转换。添加display: inline-block到动画或添加到跨度，使其可变形。

可变形元素

可变形元素是以下类别之一的元素：

其布局由 CSS 框模型控制的元素，该元素是块级或原子内联级元素，或其显示属性计算为 table-row、table-row-group、table-header-group、table-footer -组、表格单元格或表格标题 [CSS21]

SVG 命名空间中的一个元素，不受 CSS 盒模型的控制，具有 Transform、PatternTransform 或 GradientTransform 属性 [SVG11]。

参考： https: //drafts.c​​sswg.org/css-transforms-1/#terminology

HTML<span>元素是用于表达内容的通用内联容器，它本身并不代表任何内容。它可用于出于样式目的对元素进行分组（使用 class 或 id 属性），或者因为它们共享属性值，例如 lang。仅当没有其他语义元素合适时才应使用它。<span>非常类似于<div>元素，但它<div>是块级元素，而 a<span>是内联元素。

参考： https: //developer.mozilla.org/en/docs/Web/HTML/Element/span

选项 1：悬停时摇动

$(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);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="about-desc">
    <p>
 Lorem ipsum dolor sit <span class="animation">amet</span>, consectetur adipisicing elit. <span class="animation"> Officia reprehenderit</span>, <span class="animation"> sit eligendi</span> deserunt, blanditiis quas porro omnis provident quidem voluptate! Fugit ipsa mollitia, atque commodi asperiores, rerum dicta ratione aut.
    </p>
 </div>

选项2：永远摇晃

$(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);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="about-desc">
    <p>
 Lorem ipsum dolor sit <span class="animation">amet</span>, consectetur adipisicing elit. <span class="animation"> Officia reprehenderit</span>, <span class="animation"> sit eligendi</span> deserunt, blanditiis quas porro omnis provident quidem voluptate! Fugit ipsa mollitia, atque commodi asperiores, rerum dicta ratione aut.
    </p>
 </div>