Waning banner

by Daehyun Im

HTML

<!-- 

original version : http://jsfiddle.net/jonathansampson/XxUXD/

-->
<div class="status">
<div class="marquee"> 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트&nbsp;</div>
<div class="marquee" style="left:1072.5px;"> 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 </div>
</div>

CSS

.status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: 40px;
  position: absolute;
  margin: -8px;
}

/* Make it a marquee */
.marquee {
    background-color:black;
    color:white;
    animation: marquee 60s linear infinite;
    position:absolute;
}

/*
.marquee:hover {
    animation-play-state: paused
}
*/

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0,0); }
    100% { transform: translate(-1072.5px,0); }
}