如何为div中的span元素添加抖动动画

Question

ConvertsTo

我无法弄清楚实际出错的地方。当我向div元素添加动画时，它正常工作，但是span元素没有发生？有人可以解释如何解决这个问题

Answer 1

默认情况下，

span是内联元素，因此无法执行转换。将<{1}}添加到动画中或添加到范围内以便可以转换。

  

可转换元素

     

可转换元素是以下类别之一的元素：

     

一个元素，其布局由CSS box模型控制，该模型是块级或原子内联级元素，或者其display属性计算为table-row，table-row-group，table-header-group， table-footer-group，table-cell或table-caption [CSS21]

     

SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，patternTransform或gradientTransform [SVG11]。

     

参考：https://drafts.csswg.org/css-transforms-1/#terminology

     

HTML display: inline-block元素是用于表示内容的通用内联容器，它本身并不代表任何内容。它可用于将元素分组以用于样式目的（使用class或id属性），或者因为它们共享属性值，例如lang。只有在没有其他语义元素合适时才应该使用它。 <span>非常类似于<span>元素，但<div>是块级元素，而<div>是内联元素。

     

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

选项1：悬停时摇动

<span>

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

选项2：永远摇晃

<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>

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