"intro text animation"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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">
<div class="banner-text">
<h1 id="title-behind">Welcome</h1>
<h1 id="title-the">To The</h1>
<h1 id="title-lens">New</h1>
<h2 id="subtitle">Animation Css world</h2>
</div>
</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
body {
margin: 0;
background-color: #383838;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 99;
}
h1,
h2 {
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 0;
margin-top: 0;
line-height: 0.8;
text-shadow: 0 0 50px #fff;
transform: translateZ(130px);
-webkit-transform: translateZ(130px);
-moz-transform: translateZ(130px);
color: hsla(0, 0%, 0%, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
letter-spacing: 100px;
opacity: 0;
-webkit-animation: OpeningSequence 3.2s ease forwards;
-moz-animation: OpeningSequence 3.2s ease forwards;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: