css list effect

Here’s a cool list effect http://ademilter.com/lab/liffect/

CSS

ul[data-liffect="pageTop"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: pageTop 600ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 0%;
    -moz-animation: pageTop 600ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 0%;
    -o-animation: pageTop 600ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 0%;
    animation: pageTop 600ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 0%;
}

ul[data-liffect="pageTop"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageTop {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }
}

@-moz-keyframes pageTop {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes pageTop {
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes pageTop {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

HTML

<ul data-liffect="pageTop">
    <li><img src="images/1.jpeg" alt="Lion"></li>
    <li><img src="images/2.jpeg" alt="Lion"></li>
    <li><img src="images/3.jpeg" alt="Lion"></li>
</ul>

Javascript

$(document).ready(function () {
$("ul[data-liffect] li").each(function (i) {
$(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
+ "-moz-animation-delay:" + i * 300 + "ms;"
+ "-o-animation-delay:" + i * 300 + "ms;"
+ "animation-delay:" + i * 300 + "ms;");
if (i == $("ul[data-liffect] li").size() -1) {
$("ul[data-liffect]").addClass("play")
}
});
});

The post css list effect appeared first on Coding Insight.