"intro text animations"
Bootstrap 4.1.1 Snippet by serskine

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <span class="mytext1">Thank You</span> <span class="mytext2">Your subscription has now been set-up. You can make changes to you plan,<br/ > update payment details & see history by going to 'Manage Subscriptions'<br/> from the sites main menu. </span> </div>
.container{ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .container span{ text-transform: uppercase; display: block; } .mytext1{ color: white; font-size: 48px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: ; position: relative; animation: text 3s 1; } .mytext2{ font-size: 20px; color: #fff; font-weight: normal; font-family: 'PT Sans',sans-serif; text-transform: initial!important; } @keyframes text { 0%{ color: black; margin-bottom: -32px; } 30%{ letter-spacing: 25px; margin-bottom: -22px; } 85%{ letter-spacing: 8px; margin-bottom: -22px; } }

Related: See More


Questions / Comments: