Bootstrap Snippet Text animation with timing using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text animation with timing"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Text animation with timing" Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Text animation with timing"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY