CSS Typewriter Effect Animation Using Only CSS & HTML
Simple typewriterr effect animation using just css and html. In order to create this effect we will use keyframes css property and steps().
Typewriter Effect
<!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> <p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p> </body> </html>
CSS
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
html{
min-height:100%;
overflow: hidden;
}
body{
height:calc(100vh - 8em);
padding:4em;
color:rgba(255,255,255,0.75);
font-family: 'Anonymous Pro';
background-color:rgb(25,25,25);
}
.line-1{
position: relative;
top:50%;
width: 24em;
margin:0 auto;
border-right: 2px solid rgba(255,255,255,0.75);
font-style: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform:translateY(-50%) scale(2);
}
.anim-typewriter{
animation:typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
from{
width:0;
}
to{
width:24em;
}
}
@keyframes blinkTextCursor{
from{
border-right-color:rgba(255,255,255,0.75);
}
to{
border-right-color:transparent;
}
}
All code you need for this animation.
Please can you do a tuto for nested comment with symfony pls !
dcscsqcqscqscqscQs