Learn and share. The simplest harmony.

 

How To Create Animated List View Using CSS3 Only

Posted on April 19, 2012 and got 12 shouts so far

Listing items with some optional list view is a good practice to make user more comfortable on viewing our item list and it will be more nice to add some animation when they change the list view. In this post we are going to create an animated list view using pure CSS3 only.

Four List View

There will be four list view for the list item : image with text in three column, text only, image with text in one column and image only. The default view is the first one, so our list item will have three column with each column contains image and text parallel.


For the controller of our view, we’re using four radio button. These radio buttons will have zero opacity and stacked over our stylized controller, we’ll use four different image for them. This technique is aim to make a masking for doing an animation fired by checked radio but the radio itself is hidden and replaced by our image.

The Markup

We will use unordered list for displaying the item list, while the controller will use radio button and image element. The controller not wrapped by other element to take CSS selector ~ (tilde) advantage for accessing element after the radio.



			




			
  • Angry Birds Space PremiumRovio Mobile Ltd.

  • Draw SomethingOMGPOP

  • Cut the RopeZeptoLab

As described before the radio will replaced by our image :

input[type=radio] {
	position: absolute;
	z-index: 100;
	opacity: 0;
	cursor: pointer;
	height: 110px;
	width: 40px;
	margin-top: -7em;
}

.control {
	display: inline-block;
	margin: 0 -.13em;
	width: 40px;
	background: #eddfc7;
	padding: 5px 3px 1px 2px;
	border-right: 1px solid #e0cba0;
	cursor: pointer;
	vertical-align: bottom;
}
	
	.control:hover, 
		input[type=radio]:hover + .control, 
		input[type=radio]:checked + .control {
		box-shadow: inset 0px 0px 20px #d3b67a;
	}


The first list view will have following styling for the item list :

#item-list {
	margin-top: 2em;
	padding: 0;
	list-style-type: none;
	text-align: left;
}
	
	#item-list li {
		display: inline-block;
		width: 300px;
		vertical-align: top;
		margin: 0 0.5em 1em 0;
		padding: 10px;
		background: #f3eada;
		border-radius: 5px;
		box-shadow: inset 0px 0px 20px #e0cba0;
		overflow: hidden;
	}


Animation

These view will be shown when user click one of the controller, it means our radio button is checked, then we will find the item list and its content to be animated, we will use transition property for it. When user click first controller which is the default view, we will set image and text visible and list width 300px :

.view-control-1:checked ~ #item-list li img {
	opacity: 1;
	width: 100px;
	visibility: visible;
	transition: .4s .4s ease-out;
}
	
.view-control-1:checked ~ #item-list li p {
	opacity: 1;
	visibility: visible;
	transition: .4s ease-out;
}
	
.view-control-1:checked ~ #item-list li {
	width: 300px;
	transition: .4s ease-out;
}

When second controller, we will hide the image by setting its opacity and width to 0, visibility to hidden and list width to 900px :

.view-control-2:checked ~ #item-list li img {
	opacity: 0;
	width: 0;
	visibility: hidden;
	transition: .4s ease-out;
}
	
.view-control-2:checked ~ #item-list li p {
	opacity: 1;
	visibility: visible;
	transition: .4s ease-out;
}
	
.view-control-2:checked ~ #item-list li {
	width: 900px;
	transition: .4s .4s ease-out;
}	

While the third controller we will only set the list width to 900px :

.view-control-3:checked ~ #item-list li img {
	opacity: 1;
	width: 100;
	visibility: visible;
	transition: .4s ease-out;
}
	
.view-control-3:checked ~ #item-list li p {
	opacity: 1;
	visibility: visible;
	transition: .4s ease-out;
}
	
.view-control-3:checked ~ #item-list li {
	width: 900px;
	transition: .4s ease-out;
}	

And fourth controller we will hide the text by setting its opacity to 0, position to absolute, visibility hidden and set the list width to 100px :

.view-control-4:checked ~ #item-list li img {
	opacity: 1;
	width: 100;
	visibility: visible;
	transition: .4s ease-out;
}	
	
.view-control-4:checked ~ #item-list li p {
	opacity: 0;
	position: absolute;
	visibility: hidden;
	transition: .4s ease-out;
}
	
.view-control-4:checked ~ #item-list li {
	width: 100px;
	transition: .4s ease-out;
}	


Conclusion

We can playing an animation on our element based on user action by using :checked selector, so it’s like reading click event on javascript. That’s it hope it useful and enjoy reading.

 

This Post Tags :

Bookmark Post :

Pin It
  • nice job

  • Rock !

  • Great job :-)

  • really gud…!

  • amazing, and i just found this site and i find it super cool. thanks

  • yeah… exactly what i was looking for :) , many thanx

  • Достойно уважения Ваша работа.

  • nice work, but not run ie9 : (

  • 只能在opera中点击icon可以切换,在firefox和chrome不可以。只能在icon小图的上方点击才能切换

  • 只能在opera中点击icon可以切换,在firefox和chrome不可以。只能在icon小图的上方点击才能切换,我想htc和pie是不是能解决兼容问题?嗯尝试一下

  • Amazing effect. I will try it in Virtuemart Category view. Many thanks for your job!