Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated List Items in Bootstrap 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated List Items in Bootstrap</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom Reset ul and li for animated li styling in Bootstrap -->
<style type="text/css">
ul[data-liffect="zoomOut"] {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
-moz-margin-before: 0;
-moz-margin-after: 0;
-moz-margin-start: 0px;
-moz-margin-end: 0px;
-moz-padding-start: 0px;
list-style: none;
}
ul[data-liffect="zoomOut"] li {
/* Butt everything up together (Optional - Comment out if you wish) */
margin: 0;
padding: 0;
border: 0;
/* If not butting everything up, add some padding above and below to match the left and right padding from Bootstrap */
/* padding-top:15px;padding-bottom:15px; */
}
</style>
<!-- End of ul li reset stuff -->
<!-- Actual Liffect generated css - http://ademilter.com/lab/liffect/ -->
<style>
ul[data-liffect="zoomOut"] li {
opacity: 0;
position: relative;
-webkit-animation: zoomOut 300ms ease both;
-webkit-animation-play-state: paused;
-moz-animation: zoomOut 300ms ease both;
-moz-animation-play-state: paused;
-o-animation: zoomOut 300ms ease both;
-o-animation-play-state: paused;
animation: zoomOut 300ms ease both;
animation-play-state: paused;
}
ul[data-liffect="zoomOut"].play li {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes zoomOut {
0% { opacity: 0; -webkit-transform: scale(.6); }
100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes zoomOut {
0% { opacity: 0; -moz-transform: scale(.6); }
100% { opacity: 1; -moz-transform: scale(1); }
}
@-o-keyframes zoomOut {
0% { opacity: 0; -o-transform: scale(.6); }
100% { opacity: 1; -o-transform: scale(1); }
}
@keyframes zoomOut {
0% { opacity: 0; transform: scale(.6); }
100% { opacity: 1; transform: scale(1); }
}
</style>
<!-- Extra hover effect on any images in animated lists (Optional) -->
<style>
ul[data-liffect="zoomOut"] img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition:opacity .2s ease-in;
-moz-transition:opacity .2s ease-in;
-o-transition:opacity .2s ease-in;
transition:opacity .2s ease-in;
}
</style>
</head>
<body style="background-color:#000;">
<div class="jumbotron" style="margin-bottom: 0px;">
<h1>Demo <small>Animated list items in Bootstrap 3</small></h1>
<p class="lead">A simple demo of the animated &#60;li&#62; effect built with Adem ilter's generator at: <a href="http://ademilter.com/lab/liffect/">http://ademilter.com/lab/liffect</a> but mixed with Bootstrap's grid and responsive images class.</p>
<p class="lead">Try resizing your browser window and refreshing.</p>
<a class="btn btn-lg btn-info" value="Reload Page" onClick="document.location.reload(true)"><i class="fa fa-refresh"></i> Refresh page</a>
</div>
<!-- <div class="container"> --> <!-- Container is optional -->
<ul data-liffect="zoomOut">
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
<li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
</ul>
<!-- </div> --> <!-- /container that was optional -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Boostrap's JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- The JavaScript generated by liffect - http://ademilter.com/lab/liffect/ -->
<script type="text/javascript">
$(document).ready(function () {
$("ul[data-liffect] li").each(function (i) {
$(this).attr("style", "-webkit-animation-delay:" + i * 100 + "ms;"
+ "-moz-animation-delay:" + i * 100 + "ms;"
+ "-o-animation-delay:" + i * 100 + "ms;"
+ "animation-delay:" + i * 100 + "ms;");
if (i == $("ul[data-liffect] li").size() -1) {
$("ul[data-liffect]").addClass("play")
}
});
});
</script>
</body>
</html>
@xmool86247

This comment has been minimized.

Copy link

commented Jan 12, 2018

lsadlalsn

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.