HTML and CSS Text Animation
TEXT ANIMATION ONLY USING HTML & CSS
In this Tutorial I'll show you, how you can create a simple water text animation only using HTML and CSS without Java-script. In this Tutorial I've simplified the code very extensively so you can understand it easily and after learning that stuffs you can create more cool animation on your own using these simple tricks. I will teach you everything I've used in this code. So without wasting more time let's get start it...
NOTE:- very Basic knowledge of HTML and CSS is required.
NOTE:- very Basic knowledge of HTML and CSS is required.
Before starting, I want to show you how our animation gonna look like...
the Basic structure of html file is here:-
the Basic structure of html file is here:-
Index.html :-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- to initialize the viewport for device width-->
<link rel="stylesheet" href="style.css"> <!--External css linking is used-->
<meta charset="utf-8">
<title>title of the page</title>
</head>
<body>
<div class="container">
<div class="text-box">
<h1>ANIMATION</h1>
</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- to initialize the viewport for device width-->
<link rel="stylesheet" href="style.css"> <!--External css linking is used-->
<meta charset="utf-8">
<title>title of the page</title>
</head>
<body>
<div class="container">
<div class="text-box">
<h1>ANIMATION</h1>
</div>
</div>
</body>
</html>
style.css:-
*{margin: 0px;padding: 0px;} /*for setting default margin and padding values for the whole page*/
.container
{
background: url(back.jpg);
background-size: cover;
background-position: center;
height: 657px;
min-width: 100%;
width: 100%;
}
.text-box
{
text-align: center;
text-transform: uppercase;
font-size: 6vw; /* vw unit which stands for view width is used for responsive text size.*/
font-family: verdana;
color: #2c3e5036; /* last two hex digits(#2x3e5036) used for transparency of text to 36% */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-image: url(water.png);
-webkit-background-clip: text;
animation: waterEffect 5s infinite alternate ease-in-out;
/* letter-spacing: 15px; */
}
@keyframes waterEffect
{
from {background-position: top 36px left 0; }
to {background-position: top -30px left -1000px;}
}
Explaination :
transform : translate(x-coordinates,y-coordinates);
transform is a CSS property that lets you rotate, scale, skew or translate an element.It modifies the coordinate space of the CSS visual formatting model.
background-image : url(/path/image.png);
here we used water.png as sprite image to do animation. We clipped the image using webkit-backgroudn-clip property of css.
-webkit-background-clip : text;
It is used to clip the background image to text so the image will not cross the edges of text and remain enclosed in text. And then we add keyframes to move the image from bottom to top and right to left. by @keyframes CSS property.
animation : anim_name seconds(4s) animtion_count(infinite) alternate ease-in-out.
This is used to to apply the animation that we will create by keyframes
first attribute is Animation_Name in this case it is waterEffect
second attribute is time span of animation that how much longer we want to run the animation.
third attribute is animation_run_count(it can be : - 1,2,3....infinite),
4th attib is animation_direction, and
last attrib is used for animation smooth start and smooth end.
second attribute is time span of animation that how much longer we want to run the animation.
third attribute is animation_run_count(it can be : - 1,2,3....infinite),
4th attib is animation_direction, and
last attrib is used for animation smooth start and smooth end.
for ease we can use these css properties for the above code :-
animation-name: anim_name;
animation-duration: 5s;
animation-count: infinite; (can be 1,2,3)
animation-direction: alternate; could be reverse for reverse animation;
@keyframe anim_name
{
from {background-position: top 35 left 0;}
to {background-position: top 0 left 1000px;}
}
@keframes is used to add animation keyframes to make smooth animation. It's just like as we add keyframes in after effects and we just change the values of properties at every keyframe to make objetcs move, shine,glow, and explode.the difference is that Instead of using a prebuilt S/W or program we use code to make keframes and move objects in 2-Dimensional sapce.
usage :
@keyframes animation_name
{
in this block the whole animation is made. if you want full tutorial on keyframes then let me know in the comments. I will make separate blog on this topic.
}
so that's it for this blog guys. I will see you in my next blog with some more amazing stuffs. Share this blog and please support me, so I will create more stuffs like that such as games in C language, more cool stuffs in HTML and CSS, java programming tutorials and many more stuffs. Thank you. Good bye
for more stuffs such as :
html and css animation examples
html and css animation pdf
html and css text animation
html css animation templates
html css animation on scroll
html css animation background
html css animation generator
html css animation to gif
html css animation on click
html and css animation code
html css animation button
html css border animation
html css bubble animation
html css box animation
html css best animations
html css bild animation
html css ball animation
html css animation checked
html css counter animation
html css card animation
html css click animation
{
from {background-position: top 35 left 0;}
to {background-position: top 0 left 1000px;}
}
@keframes is used to add animation keyframes to make smooth animation. It's just like as we add keyframes in after effects and we just change the values of properties at every keyframe to make objetcs move, shine,glow, and explode.the difference is that Instead of using a prebuilt S/W or program we use code to make keframes and move objects in 2-Dimensional sapce.
usage :
@keyframes animation_name
{
in this block the whole animation is made. if you want full tutorial on keyframes then let me know in the comments. I will make separate blog on this topic.
}
so that's it for this blog guys. I will see you in my next blog with some more amazing stuffs. Share this blog and please support me, so I will create more stuffs like that such as games in C language, more cool stuffs in HTML and CSS, java programming tutorials and many more stuffs. Thank you. Good bye
for more stuffs such as :
html and css animation examples
html and css animation pdf
html and css text animation
html css animation templates
html css animation on scroll
html css animation background
html css animation generator
html css animation to gif
html css animation on click
html and css animation code
html css animation button
html css border animation
html css bubble animation
html css box animation
html css best animations
html css bild animation
html css ball animation
html css animation checked
html css counter animation
html css card animation
html css click animation
Comments
Post a Comment
if you've any doubts or queries you're free to ask