Custom animation doesn't work with inline elements only in Chrome/Opera

Question

I'm playing with an animation I found on CodeMyUi.

Here is my code: 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>

Less:

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

The problem occurs in the span element when the texts is on multiple lines and viewed in webkit browsers. Example:

Displaying the element as inline-bock or block will solve the problem but my question is if somebody can explain why this happens.

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.

Read more Here and Here .