CSS Marquee Bootstrap 3

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="mainNotificationSpace" class="alert alert-info" role="alert">
  <div class="holder">
    <div class="news">Hello....</div>
  </div>
</div>

<button>
Add
</button>

CSS

.holder {
  /*background:#ccc;*/
  padding:0.5rem;
  overflow: hidden;
}
.news {
  animation : slide 10s linear infinite;
  
}

@keyframes slide {
  0% {
    transform: translatex(0%)
  }

  100% {
    transform: translatex(100%)
  }
}

JavaScript

$(function() {

  $('button').click(function() {
    $('div#mainNotificationSpace').find('.news').append('<strong> To Me </strong>');
  });
});