Text Animation Effect
Text Animation Effect...
Demo
HTML
<div class="animation-text-effect"> <div class="animation-text-container"> <div class="animation-text-content"> <h2 class="frame-1">What is Lorem Ipsum?</h2> <h2 class="frame-2">Where does it come from?</h2> <h2 class="frame-3">Why do we use it?</h2> <h2 class="frame-4">Now!</h2> <h2 class="frame-5"><span>Lorem Ipsum</span> <span>is simply</span> <span>dummy text.</span></h2> </div> </div> </div>
CSS
<style> body { background: #037cd5; } .animation-text-effect { width: 100%; position: relative; overflow:hidden; } a { text-decoration:none; } h1.main,p.demos { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .animation-text-container { width: 100%; height: 400px; z-index: 0; background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); } .animation-text-content { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1000; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .animation-text-container h2 { position: absolute; top: 50%; left:0; line-height: 60px; margin-top: -27px; font-size: 3.2em; width: 100%; text-align: center; color: transparent; -webkit-animation: blurFadeInOut 3s ease-in backwards; -moz-animation: blurFadeInOut 3s ease-in backwards; -ms-animation: blurFadeInOut 3s ease-in backwards; animation: blurFadeInOut 3s ease-in backwards; } .animation-text-container h2.frame-1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .animation-text-container h2.frame-2 { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .animation-text-container h2.frame-3 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .animation-text-container h2.frame-4 { font-size: 6em; -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; } .animation-text-container h2.frame-5 { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; color: transparent; text-shadow: 0px 0px 1px #fff; } .animation-text-container h2.frame-5 span { -webkit-animation: blurFadeIn 3s ease-in 12s backwards; -moz-animation: blurFadeIn 1s ease-in 12s backwards; -ms-animation: blurFadeIn 3s ease-in 12s backwards; animation: blurFadeIn 3s ease-in 12s backwards; color: transparent; text-shadow: 0px 0px 1px #fff; } .animation-text-container h2.frame-5 span:nth-child(2) { -webkit-animation-delay: 13s; -moz-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .animation-text-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } /* keyframes */ @-webkit-keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } } @-webkit-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } } @-webkit-keyframes fadeInBack{ 0%{ opacity: 0; -webkit-transform: scale(0); } 50%{ opacity: 0.4; -webkit-transform: scale(2); } 100%{ opacity: 0.2; -webkit-transform: scale(5); } } /**/ @-moz-keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } } @-moz-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } } @-moz-keyframes fadeInBack{ 0%{ opacity: 0; -moz-transform: scale(0); } 50%{ opacity: 0.4; -moz-transform: scale(2); } 100%{ opacity: 0.2; -moz-transform: scale(5); } } /**/ @keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } } @keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } @keyframes fadeInBack{ 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 0.4; transform: scale(2); } 100%{ opacity: 0.2; transform: scale(5); } } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { .animation-text-container { height:240px; } .animation-text-container h2 { font-size: 30px; line-height:38px; margin-top: -19px; } } </style>