<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="banner_animate"> <h1>Text Zooming Effect</h1>

.banner_animate h1 { font-size: 88px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #ffd964; margin: 0; padding: 90px 0 25px 0; transform-origin: 50% 100%; text-shadow: 2px 2px 2px #333; animation-duration: 3s; animation-name: fade; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); } .banner_animate a { font-family: Cambria, Cochin, serif; font-size: 16px; color: #333; padding: 5px; border-radius: 5px; background-color: #A6D2FF; transition: background-color .2s ease-out; } .banner_animate a:hover { background-color: #EEE; } @keyframes fade { from { opacity: 0; transform: scale(.9, .9); } to { opacity: 1; transform: scale(1, 1); } }