In this tutorial we going to create a Animate Text with SVG and CSS . Every one want something unique in their website, some one go for clean design , some people prefer colorful and vivid design and some want animation and effects. In this tutorial we are using word “Codentricks” and will animate with infinite loop.
Full Code for Animate Text with SVG and CSS :
create a file called index.html with code given below and save it and launch in any modern web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Text</title>
</head>
<body>
<svg viewbox="0 0 1350 650">
<text x="50%" y="50%" fill="transparent" text-anchor="middle">
Codentricks
</text>
</svg>
<style>
svg text{
stroke:#000;
font-size: 150px;
font-family: Arial,Times,serif;
font-weight: 700;
stroke-width:5;
animation: animateText 6s infinite;
}
@keyframes animateText {
0%{
stroke-dasharray:0 50%;
}
100%{
stroke-dasharray:50 0%;
}
}
</style>
</body>
</html>
OUTPUT Animate Text with SVG and CSS :
Related Posts:
Learn How To Create a Sticky Social Media Bar
HTML FORM tutorial with CSS based Example
Simple Link Hover Effect using CSS Tutorial
Creating a Digital Clock using Pure Javascript
PHP File Uploading easy to learn tutorial with complete script
How to make a BMI Calculator using Pure Javascript
AngularJS Dynamic Product Add with Calculation
Creating Stunning Pure CSS Navigation Menu with Simple Coding
Python Tutorial Indroduction
HTML 5 introduction
