Tile Animations in CSS

HTML
<div id="portfolio"> <ul class="portfolio-grid"> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/1abc9c/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/2ecc71/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/3498db/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/9b59b6/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/16a085/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/27ae60/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/2980b9/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/8e44ad/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/f1c40f/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/e67e22/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/e74c3c/FFFFFF" alt="img01"/> </a> </li> <li> <a href="#" class="animated flipInX"> <img src="http://placehold.it/200x200/c0392b/FFFFFF" alt="img01"/> </a> </li> </ul> </div>
CSS
body { height: 100%; background-color: #f2f2f2; } .portfolio-grid { list-style: none; padding: 0; margin: 0 auto; text-align: center; width: 100%; } .portfolio-grid li { display: inline-block; margin: 5px 5px 5px 5px; vertical-align: top; width:212px; } .portfolio-grid li > a, .portfolio-grid li > a img { width: 100%; border: none; outline: none; display: block; position: relative; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .portfolio-grid li > a img:hover { border-radius: 50%; z-index: 9999; } /****************************************** Animate.CSS By Dan Eden ******************************************/ .animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;} @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; }
JAVASCRIPT
Expand for more options Login