Simple Text Animation Using HTML & CSS

Simple Text Animation Using HTML & CSS

We as developers and coders try make to fulfill the wish of our users and clients it is our duty not to provide them with a simple layout or basic design we have this tool in which we can add effects where we wish to so with that note.

We’ll code a Simple Text Animation for text in which the styling script of CSS will play a major so Hey guys Welcome back to Codewithrandom I hope you have got an idea for the project.

Using HTML And CSS we present Simple Text Animation Using HTML & CSS projects with source code available for you to copy and paste directly into your own project.

HTML Code for Text Animation

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
  </div>
  AweSoMe!
</div>

<p>a css3 animation demo</p>

In this code of HTML for the structure, we have just defined a division and added some text. Let’s code the major part of the project which is the CSS file.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

CSS Code for Text Animation

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

In this major code of CSS we have imported the fonts as mentioned in the link then we have given the alignment to the division in which there are some text values and created a function called flip in which we have defined the color for the text and then we have set the position, font size & color for the text. Let’s see the final output.

50+ Html ,Css &Javascript Projects With Source Code

Final Output Simple Text Animation using HTML5 & CSS3

We have successfully created our Simple Text Animation Using HTML5 & CSS3 | CSS Text Animation. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Keep Learning!!!

Written By – Harsh Sawant

Code By – Nooray Yemon