How to animate color?
<p>I have li elements:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;test 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;test 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>and I want to animate color on hover that a new color comes from the bottom.</p>

<p>How to do it?</p>
