title: Auto text bouncing back and fourth CSS like marquee for long text label
body: <p>I have a requirement to show auto movable text feature (just like marquee with alternative behavior) on the label which has long text.</p>
  
  <p><a href="https://i.stack.imgur.com/hEEgO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hEEgO.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see <strong>Created On: 28 Nov, 2017</strong> label in sap.m.ObjectAttribute is just got wrapped because of the default behavior of ObjectListItem control. I am looking for the <strong>CSS</strong> that could make the wrapped text movable front and back just like marquee with alternative behavior, so that i can see entire unwrapped text bouncing front and back.</p>
  
  <p>Please refer to <a href="https://codepen.io/anon/pen/POBMOL" rel="nofollow noreferrer">example</a>, In this when you mouse-over the div, the label starts scrolling left and when you take away the mouse from the div, it will scroll back to its initial point.</p>
  
  <p>I am looking for the CSS like this but with the auto effect. So that once i have applied to any possible label which have long text, the label should auto start the scroll back and front automatically.</p>
  
  <p>Kindly help me on this.</p>
  
  <p>Another example based on <a href="https://www.quackit.com/html/codes/html_marquee_code.cfm" rel="nofollow noreferrer">marquee</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: lightgrey;
  }
  
  .blue-btn {
    position: absolute;
    left: 35%;
    top: 40%;
  }
  
  .blue-btn a {
    color: white;
    text-decoration: none;
    margin-top: 0em;
    text-align: center;
    display: inline-block;
    /* important */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .blue-btn,
  .first-link {
    -moz-transition: 3.3s;
    transition: 3.3s;
    -moz-transition-timing-function: linear;
    transition-timing-function: linear;
  }
  
  .blue-btn {
    height: 64px;
    font: normal normal 700 1em/4em Arial, sans-serif;
    overflow: hidden;
    width: 200px;
    background-color: #3b5998;
  }
  
  .blue-btn:hover {
    background-color: #003D99;
  }
  
  .blue-btn a:hover {
    text-decoration: none;
  }
  
  .first-link {
    margin-left: 0em;
  }
  
  .blue-btn:hover .first-link {
    margin-left: -300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="blue-btn"&gt;
    &lt;a class="first-link" href=""&gt;Thisisanextreamlylongtext,kindoflikeanamecouldbe&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>