In this article, we will discuss about how to implement text typing animation effect on our web page using CSS/CSS3 with example.
Write the code as shown below-
HTML:
Now save the file and run on browser to view the text typing animation effect.
Preview:
Live Demo:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pure CSS / CSS3 Text Typing Animation Effect with Example</title>
<style>
* {
box-sizing: inherit;
}
body {
background-color: #2a2a28;
font-family: "Fira Mono", monospace;
}
.typewriter, .item {
height: 30px;
display: block;
}
.typewriter {
overflow: hidden;
color: lime;
}
.item {
position: relative;
font-size: 17px;
animation: line_change_animation 18s steps(3) infinite;
}
.inner_item {
display: inline-block;
position: relative;
line-height: 1;
}
.inner_item:after {
content: "";
position: absolute;
top: -1px;
right: 0;
bottom: -2px;
left: 0;
border-left: 1px solid lime;
background-color: #2a2a28;
animation: typing_animation 3s steps(36) infinite alternate;
}
/* The typing animation effect */
@keyframes typing_animation {
0% {
left: 0;
margin-right: auto;
}
100% {
left: 100%;
margin-left: .6em;
margin-right: -.6em;
}
}
/* The line change animation effect */
@keyframes line_change_animation {
0% {
top: 0;
}
100% {
top: -90px;
}
}
</style>
</head>
<body>
<div class="typewriter">
<span class="item"><span class="inner_item">Simple typing animation with css3.</span></span>
<span class="item"><span class="inner_item">Created by www.webcodelogics.com :)</span></span>
<span class="item"><span class="inner_item">Like & Share with your friends...</span></span>
</div>
</body>
</html>
Now save the file and run on browser to view the text typing animation effect.
Preview:
Live Demo:
Simple typing animation with css3.
Created by www.webcodelogics.com :)
Like & Share with your friends...
0 comments:
Post a Comment