JSFiddle - React, Tailwind, and code Playground

Retro Comments - Hover icons

by Jennifer Perrin

HTML

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Satisfy"
/>
<ul id="messages">
    <!-- 1 -->
    <li>
        <div class="infos">
            <img src="http://farm5.staticflickr.com/4136/4817542998_55a7eb8d8b_q.jpg"
            alt="" title="by tresMunkeys" />	<a href="http://twitter.com/webodream" class="sprite twitter">@webodream</a>

            <a
            href="http://www.facebook.com/groups/115089745169149" class="sprite facebook">depot.webdesigner</a>	<a href="http://github.com/arbaoui-mehdi" class="sprite github">@arbaoui-mehdi</a>

        </div>
        <div class="content">
            	<h3>
					Arbaoui Mehdi
					<b>ceo &amp; founder "depot webdesigner"</b>
				</h3>

            <p>Etiam iaculis, ipsum sit amet scelerisque dictum, diam justo suscipit
                mauris, a lacinia odio nulla et tellus. Praesent placerat ipsum sed purus
                rutrum vel dapibus magna scelerisque. Nulla sit amet orci at metus euismod
                tincidunt. Etiam <a href="#">http://www.depotwebdesigner.com</a> et nunc
                eu massa fermentum feugiat.</p>
        </div>
    </li>
    <!-- 2 -->
    <li>
        <div class="infos">
            <img src="http://farm3.staticflickr.com/2721/4531285963_cd28f61b16_q.jpg"
            alt="" title="by tresMunkeys" />	<a href="http://twitter.com/webodream" class="sprite twitter">@webodream</a>

            <a
            href="http://www.facebook.com/groups/115089745169149" class="sprite facebook">depot.webdesigner</a>	<a href="http://github.com/arbaoui-mehdi" class="sprite github">@arbaoui-mehdi</a>

        </div>
        <div class="content">
            	<h3>
					Edmundo I. Jacobi
					<b>webdeveloper</b>
				</h3>

            <p>Lorem ipsum non minim Excepteur Duis sunt labore ut laborum sit ullamco
                sed ex.Lorem ipsum dolor adipisicing ullamco cillumLorem ipsum non minim
                Excepteur Duis sunt labore ut laborum sit ullamco sed...

CSS

body {
    background: url("http://www.depotwebdesigner.com/images/1/background.jpg");
    font: 15px/150% Georgia, "Times New Roman", Times, serif;
}
/* =============================================== /*
/*                                                 /* 
/*     Animate CSS : http://daneden.me/animate     /*
/*                                                 /*
/* =============================================== */
 @-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
    }
    30% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    30% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    30% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
    }
}
.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill: both;
    -moz-animation-fill: both;
   ...

JavaScript

$(function () {
	    var $list = $('ul li');
	    $list.filter(':first').addClass('animated flipInX');
	    setInterval(function () {
	        if ($list.filter('.flipInX').index() !== $list.length) {
	            $list.filter('.flipInX').removeClass('animated flipInX').next().addClass('animated flipInX');
	        }
	    }, 400);
	});