HTML
<div class="liverpool">Liverpool FC</div>
<a class="tip" href="#">Did you know?
<div class="help-box">
<p>if i only have one element inside the body element and give it some vertical margin it will overflow outside the body.this would not happen with simple block-level element.we fix it by using overflow:hidden for the body tag.</p></div></a>
CSS
body{
height:100%;
padding: 0;
margin: 0;
overflow:hidden;
background:#D00027;
color:#FEF667;
}
html{
height: 100%;
padding: 0;
margin: 0;
}
.liverpool{
margin: 100px auto 0px auto;
text-align: center;
font-size: 90px;
font-size-adjust: 0.59;
line-height: 320%;
letter-spacing:5px;
animation: leter-fade 1s linear;
}
@keyframes leter-fade{
0%{
letter-spacing:5px;
overflow:hidden;
animation-timing-function: ease-in;
}
30%{
letter-spacing:7px;
overflow:hidden;
}
40%{
letter-spacing: 5px;
}
50%{
letter-spacing: 7px;
}
60%{
letter-spacing: 5px;
}
70%{
letter-spacing:7px;
animation-timing-function: cubic-bezier(1,.04,1,.39);
}
}
.tip{
color:white;
font-size:15px;
text-decoration:none;
cursor:alias;
display:table;
margin:auto;
position:relative;
}
.help-box{
opacity:0;
position:absolute;
transform:translate(-210px,25px);
width:520px;
height:80px;
text-align:center;
border-radius:30px;
background:#00A398;
color:white;
}
.help-box p{
transform:translatey(-5px);
}
.tip:hover{
text-decoration:none;
color:#D00027;
}
.tip:hover .help-box{
animation:tip-box .5s 1s forwards linear;
}
@keyframes tip-box{
0%{
opacity:0;
transform:translate(-210px,25px);
}
30%{
opacity:1;
transform:translate(-210px,35px);
}
50%{
transform:translate(-210px,25px);
}
70%{
transform:translate(-210px,30px);
}
85%{
opacity:1;
transform:translate(-210px,25px);
}
100%{
opacity:1;
transform:translate(-210px,25px);
}
}
