CSS3 transitions

10.Jul.2010

CSS3 supports a lot of nice features that we could only make through JavaScript in past. One of features is CSS3 transitions. In this simple example, we shall show you how to code and use CSS3 transitions.

First, we shall define CSS in which we’ll have CSS3 transitions defined for our object on HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.hiding {
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
	float: left;
}
 
.hiding img {
	position: absolute;
	top: 0;
	left: 0;
}
 
/* CSS3 transitions */
.hiding img {
	-webkit-transition: left 1s ease-in;
	-moz-transition: left 1s ease-in;
	-o-transition: left 1s ease-in;
	transition: left 1s ease-in;
}
 
.hiding:hover img {
	left: -200px;
}

Then, we shall define HTML which is going to use CSS3 transitions to produce sliding effect:

1
2
3
4
<div class="hiding">
	<img src="/demo/css3-transitions.png" alt="CSS3 transitions image" width="200" height="200" />
	<p>CSS3 transitions text</p>
</div>