Usually in the middle of websites or at the beginning of the website, such an effect is used to display the capabilities of the website in a few words. This effect is horizontal and first a word or a short title is written and then this word goes horizontally to the left and a phrase is written sliding in front of it. Also, all the texts in this post are gray.
HTML
<!-- This script got from www.devanswer.com -->
<p >Escape</p>
<div>
<span style="
margin-bottom: -8px !important;
/* float: right; */
display: block;
">into amazing experiences</span>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
body {
text-align:center;
background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:40vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
p { /* For increasing performance
ID/Class should've been used.
For a small demo
it's okaish for now */
animation: showup 7s infinite;
display: inline-block;
font-size:32px;
margin:0;
}
div {
width:0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 7s infinite;
}
@keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
@keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
@keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
