Marquee in modal
Moving text in Modal
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" style="width:100%">
<div style="width:100%;width: relative;display: inline-block;position: relative;-webkit-animation: myfirst 15s infinite;-webkit-animation-direction: alternate;animation: myAni 15s infinite;animation-direction: initial; ">
<p>Some text in the modal.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
CSS
.divMarquee {
width: relative;
display: inline-block;
position: relative;
-webkit-animation: myfirst 5s infinite;/* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate;/* Safari 4.0 - 8.0 */
animation: myAni 5s infinite;
animation-direction: initial;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes myAni {
0% {left: -50%;top: 0px;}
100% {left: 110%;top: 0px;}
}
@keyframes myAni {
0% {left: -50%;top: 0px;}
100% {left: 110%;top: 0px;}
}
/*
@-webkit-keyframes myAni {
0% {left: 0px;top: 100px;}
100% {left: 0px;top: -100px;}
}
@keyframes myAni {
0% {left: 0px;top: 100px;}
100% {left: 0px;top: -100px;}
} */
.modal-body {
overflow: hidden;
}