Make a text scroll automatically, with CSS animation, only if it overflows

I want to have a div, that when you hover it, text scroll if it's larger than the div.

But for now the text will always scroll event if it's shorter.

Here is my html code :

https://codesandbox.io/s/gracious-glade-7z31zc?file=/index.html

In this exemple, I would like the animation disabled on the second as it fits in the container.

Do you know a way to do it in CSS ? Or do I have to use JS ?

Thanks.

Solution

Dont know it is possible in CSS, but its quite simple is JS.

First of all i made another class for hovering effect:

 .scrolled:hover {
    animation: scroll-rtl 15s linear forwards;
  }

Then quick js as commented.

document.querySelectorAll('.chip-value') // get all elements you want
.forEach( item => { // iterate over them and get every as "item"
  if(item.offsetWidth > 400){ // check if it's widthter than parent
    item.classList.add('scrolled') // if is, add him class to scroll
  }
})

.chip-container {
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 3px;
        margin-bottom: 3px;
        max-width: 400px;
        height: 32px;
        font-size: 0.8125rem;
        display: inline-flex;
        align-items: center;
        /* WebkitBoxAlign: center; */
        border-radius: 16px;
        white-space: nowrap;
        /* // outline: 0, */
        text-decoration: none;
        /* // border: 0, */
        vertical-align: middle;
        /* // boxSizing: 'border-box', */
        overflow: hidden;
        background-color: gray;
        color: white;
      }

      .chip-value {
        display: inline-block;
        position: relative;
        text-overflow: clip;
        margin-right: 5px;
        margin-left: 5px;
      }

      .scrolled:hover {
        animation: scroll-rtl 15s linear forwards;
      }

      @keyframes scroll-rtl {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(-100%);
        }
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet/css" href="index.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="chip-container">
      <div class="chip-value">
        Very very very very very very very very very very very very very very
        very very very very very very very very very long
      </div>
    </div>

    <div class="chip-container">
      <div class="chip-value">
        Not long
      </div>
    </div>

  </body>
</html>