Dynamic ellipsis scrolling

Works on Firefox, Chrome, Opera, IE11

by Ashkan_

HTML

<div class="f">
  <div class="s">
    <div class="t">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit accusamus nulla facilis unde sed ipsum maiores adipisci, eius excepturi saepe perspiciatis sequi optio ipsam odio quibusdam quo libero repudiandae.
    </div>
  </div>
</div>

CSS

.t {
    white-space: nowrap;
    position: relative;
    overflow: hidden;   
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}
.s {
  display: inline-block;
  width: 100%;
}
.t:hover, .s:hover {
  width: auto;
}
.s:hover .t { 
  animation: scroll 15s;
}
.f {
  width: 100px;
  background: red;
  overflow: hidden;
}
@keyframes scroll {
    0% {left: 0px;}
    100% {left: -100%;}                    /* Works in Chrome,Firefox, Opera and IE11 */
}