html - 自定义动画仅在 Chrome/Opera 中不适用于内联元素

Question

我正在玩动画 I found在 CodeMyUi 上。

这是我的代码:https://codepen.io/anon/pen/ZxbVgv?editors=1100

HTML:

<h1 class="linear-wipe"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam at officiis deserunt aliquid, possimus voluptas mollitia perspiciatis. Minus sed nulla in recusandae quaerat ut, quos obcaecati nihil eligendi, aspernatur quidem?</h1>

<span class="linear-wipe"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam at officiis deserunt aliquid, possimus voluptas mollitia perspiciatis. Minus sed nulla in recusandae quaerat ut, quos obcaecati nihil eligendi, aspernatur quidem?</span>

减少:

span{
  border: 1px solid black;
}

.linear-wipe {  
  background: linear-gradient(to right, #00F 20%, #FF0 40%, #FF0 60%, #00F 80%);
  background-size: 200% auto;

  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine 1s linear infinite;
  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }
}

当文本位于多行并在 webkit 浏览器中查看时，问题出现在 span 元素中。示例:

将元素显示为内联 block 或 block 将解决问题，但我的问题是是否有人可以解释为什么会发生这种情况。

Answer 1

span is the standard inline element. Historically, span elements can't be animated with CSS. In order to animate them, you'll need to give them a display property.

阅读更多 Here和 Here .