Hello developers, today in this blog, you'll learn to create a Text Animation using HTML & CSS.
Text Animation is a broad term in computer graphics that refers to creating a moving letter, words, or paragraphs. In animation, it relates to creating text that moves in some fashion across the screen, within the area, or by following a pattern of motion.
In this blog (Text Animation) on the webpage, there is a word on the center page as 'LEARNINGROBO', the first letter slightly moves up and comes down. When the first letter comes down, the second letter will move up, the adjacent next letter moves up and down. This process is done till the end of the letter. After the last letter, the moving of the animation starts from the first letter. The process repeats again and again.
The @keyframe CSS property is mainly used for text animation. Each letter in a word moves up and down at one second. This animation is to be an infinite iteration. The CSS transform property is used for the reflection of the word.
The source code of this Text Animation is given below, if you want the source code of this program, you can copy it. You can use this Text Animation with your creativity and can take this project to the next level.
Text Animation [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.waviy {
position: relative;
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
font-size: 60px;
}
.waviy span {
font-family: 'Alfa Slab One', cursive;
position: relative;
display: inline-block;
color: #000;
text-transform: uppercase;
animation: waviy 1s infinite;
animation-delay: calc(.1s * var(--i));
}
@keyframes waviy {
0%,40%,100% {
transform: translateY(0)
}
20% {
transform: translateY(-20px)
}
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#FFF
}
Thank you for reading our blog. If you face any problem in creating this Text Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team