<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<ul class="list-points2">
<li style="color:#fff;margin-bottom: 0;">
<p>Each function is priced Individually</p>
</li>
<li style="color:#fff;margin-bottom: 0;" >
<p style="color:green;font-style:italics;">This is a text <span style="font-style: bold;"><strong>Hello</strong> of competition.</span></p>
</li>
<li style="margin-left: 70px;margin-bottom: 0;list-style-type: disc !important;background-image: none;padding-left: 0;" >Welcome to text animation!</li>
<li style="margin-top: 10px;">animation is everywhere? - <em> <strong style="color:red;">its easy </strong></em></li>
</ul>
</div>
</div>
ul.list-points2 li{
animation: linear alternate;
-webkit-animation: linear alternate;
-moz-animation: linear alternate;
-o-animation: linear alternate;
animation-name: run;
animation-duration: 1s;
-webkit-animation-name: run;
-webkit-animation-duration: 1s;
-moz-animation-name: run;
-moz-animation-duration: 1s;
position: relative;
}
ul.list-points2 li:nth-child(3) {
animation-delay:0.2s;
}
ul.list-points2 li:nth-child(4) {
animation-delay:0.4s;
}
@keyframes run {
0% {
right: 0;
}
50% {
left : 100%;
}
100% {
left: 0;
}
}
@-webkit-keyframes run {
0% {
right: 0;
}
50% {
left : 100%;
}
100% {
left: 0;
}
}
