How to Create Text Animation Using CSS

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues. 

For Example see bolow:
@-webkit-keyframes NAME-YOUR-ANIMATION {} @-moz-keyframes NAME-YOUR-ANIMATION {} @-o-keyframes NAME-YOUR-ANIMATION {} @keyframes NAME-YOUR-ANIMATION {}

#box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ }

Following are the steps to creating HTML and CSS  text animations. 

Step 1 : ( Create HTML )

    <p>I'm a</p>

    <b>
      <span>
        web developer<br /> 
        css cowboy<br />
        self-facilitating media node<br />
        box inside a box<br />
        part of the problem
        </span>
    </b>

Step 2 : ( Apply CSS Styles to HTML )

        body {
          padding: 2em 5em;
          font: normal 40px/50px Arial, sans-serif;
          color: #999;
        }
        p {
          height: 50px;
          float: left;
          margin-right: 0.3em;
        }
        b {
          float: left;
          overflow: hidden;
          position: relative;
          height: 50px;
        }
        span {
          display: inline-block;
          color: #FF6633;
          position: relative;
          white-space: nowrap;
          top: 0;
          left: 0;
          -webkit-animation: move 5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 1s;
        }
        
        @keyframes move {
            0%  { top: 0px; }
           20% { top: -50px; }
           40% { top: -100px; }
           60% { top: -150px; }
           80% { top: -200px; }

        }

I hope you like this article very much & Please don't forget to share.

Thank you.