Unordered list in HTML with animated list points
Your HTML is far too overloaded. 


The .point elements are unnecessary and can be replaced by using the pseudo-element ::before. This requires adding the property content: "".
Generally as a rule, it's wrong to use the same class on all child elements, especially when it's generic like item. Better mark the list itself and use a child selector to select the items, for example .animated-list &gt; li.
The &lt;div class="text"&gt; also seem unnecessary for this example. Setting display: inline-block and width have nothing to do with animated bullets and the color and font-family should be assigned on a higher level element such as the body.


In the CSS, as mentioned above


replace ul with ul.animated-list
replace .item with ul.animated-list &gt; li
replace .point with ul.animated-list &gt; li::before


The sudden use of :first-child instead of .point seems strange. Use ul.animated-list &gt; li::before here too, thus ul.animated-list &gt; li:nth-of-type(1)::before.

Finally, I'd expect the the bullets to animate when hovering over the list item not just the bullet itself, so I'd replace .point:hover with ul.animated-list &gt; li:hover::before.

And for some "flair" consider adding transition: transform 0.1s; to get a smooth animation.

EDIT: Here's my code: http://codepen.io/anon/pen/adoWxp