title: Change font color letter by letter in one word on hover
body: <p>I want to change the color of each letter in one word when mouse over happens.</p>
  
  <p>I use transition for doing this but  I want this change to happen smoothly from left to right but I don't know why the ease-in timing function does not work. I want to change the color of my letters in such a way that div element moves.</p>
  
  <p>The first one in this site is what I want:
  <a href="http://tympanus.net/Development/TextStylesHoverEffects/" rel="nofollow">http://tympanus.net/Development/TextStylesHoverEffects/</a></p>
  
  <pre><code>&lt;style&gt;
      p {
          transition: all 0.5s ease-in;
      }
  
      div {
          width: 100px;
          height: 100px;
          background: red;
          position: relative;
          -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
          -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
          animation: mymove 5s infinite;
          animation-timing-function: linear;
      }
  
      .a:hover{
          color: cyan;
      }
  
      @-webkit-keyframes mymove {
          from {
              left: 0px;
          }
  
          to {
              left: 200px;
          }
      }
  
      @keyframes mymove {
          from {
              left: 0px;
          }
  
          to {
              left: 200px;
          }
      }
  &lt;/style&gt;
  
  &lt;body&gt;
      &lt;p class="a"&gt;HelloGolnaz&lt;/p&gt;
  
      &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;           
  </code></pre>
  
  <p>Sorry if this is a simple question and thank you.  </p>