How to Create Text Animation Effect With CSS & HTML
This text animation effect is very easy to implement and it's very useful because you can add multiple words when you want to describe a service or a product. It's like a slider but the best part is that you don't have to add any javascript or css library to slow down your website, with just few lines of css and html you can create this nice animation. To see the animation scroll down to the bottom of the article and watch the video.
Text Animation Effect
Let's start with the HTML structure:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
<div class="content__container">
<p class="content__container__text">
Hello
</p>
<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">bob !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>
</body>
</html>
Now, we have to add few lines of CSS in order to animate the above structure. Basically we will give the structrure a fixed height and overflow hidden. So all words will be hidden, then just move the inner content up and down to create this text animation effect.
CSS:
body{
background:#5271ff;
width: 100%;
height:100%;
position:fixed;
}
.content{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
height:160px;
overflow: hidden;
font-family: 'Lato';
font-size:35px;
line-height: 40px;
color:#ecf0f1;
}
.content__container{
font-weight: 600;
overflow: hidden;
height: 40px;
padding:0 40px;
}
.content__container:before{
content:'[';
left:0;
}
.content__container:after{
content:']';
right:0;
position: absolute;
}
.content__container:before,
.content__container:after{
position: absolute;
top:0;
color:#fff;
font-style: 42px;
line-height: 40px;
-webkit-animation-name:opacity;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
animation-name:opacity;
animation-duration:2s;
animation-iteration-count:infinite;
}
.content__container__text{
display: inline;
float:left;
margin:0;
}
.content__container__list{
margin-top:0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name:change;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
animation-name:change;
animation-duration:10s;
animation-iteration-count:infinite;
}
.content__container__list__item{
line-height: 40px;
margin:0;
}
@-webkit-keyframes opacity{
0%,100%{
opacity:0;
}
50%{
opacity:1;
}
}
@keyframes opacity{
0%,100%{
opacity:0;
}
50%{
opacity:1;
}
}
@-webkit-keyframes change{
0%,12.66%,100%{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
16.66%,29.32%{
-webkit-transform:translate3d(0,-25%,0);
transform:translate3d(0,-25%,0);
}
33.32%,45.98%{
-webkit-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
}
49.98%,62.64%{
-webkit-transform:translate3d(0,-75%,0);
transform:translate3d(0,-75%,0);
}
66.64%,79.3%{
-webkit-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
}
83.3%,95.96%{
-webkit-transform:translate3d(0,-25%,0);
transform:translate3d(0,-25%,0);
}
}
@keyframes change{
0%,12.66%,100%{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
16.66%,29.32%{
-webkit-transform:translate3d(0,-25%,0);
transform:translate3d(0,-25%,0);
}
33.32%,45.98%{
-webkit-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
}
49.98%,62.64%{
-webkit-transform:translate3d(0,-75%,0);
transform:translate3d(0,-75%,0);
}
66.64%,79.3%{
-webkit-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
}
83.3%,95.96%{
-webkit-transform:translate3d(0,-25%,0);
transform:translate3d(0,-25%,0);
}
}
That't it.