Đến thời điểm hiện tại bạn vẫn phải sử dụng chrome và safari cho việc thực hành CSS3 (bạn cũng có thể dùng bản firefox 4.0 beta 1)

Tại sao lại sử dụng CSS Transition

Hiện tại chúng ta vẫn dùng transition như sau (do CSS3 chưa phổ biến)

$(function() {
	$('#jstrans').hover(function(){
		//Khi di chuột vào trong thẻ div
		$(this).stop().animate({
			duration: 1000, // 1 giây (1000 ms)
			width: 200,
		});
		}, function(){
		//Khi di chuột ra ngoài
 		$(this).stop().animate({
			duration: 1000, // 1 giây
			width: 100
	 });
	});
});

Mã css là:

#jstrans {
	background: #09C;
	height: 80px;
	width: 100px;
	margin:10px;
}

Với CSS3, chúng ta sẽ làm như sau:

#csstrans{
   margin:10px;
   width:100px;
   height:80px;
   background:#000;
   -webkit-transition: all 0.5s ease; /* Hiệu ứng sẽ kết thúc trong nửa giây  */
   -moz-transition: all 0.5s ease; /* Đoạn này là chờ Firefox có transition là nó sẽ chạy */
}
 
#csstrans:hover{
   width:200px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease;
}

Ở trạng thái bình thường thì #csstrans có chiều rộng là 100px, khi di chuột qua (sử dụng pseudo-class :hover) thì chiều rộng là 200px. Và hiệu ứng sẽ được thực hiện nhờ có -webkit-transition: all 0.5s ease;

Như bạn thấy, sử dụng CSS3 transition khi viết code sẽ ngắn hơn và tiện hơn (có thể không cần phải include jQuery vào trang của bạn)

Các tính chất của Transition

Transition có 4 tính chất:

• transition-property: Thuộc tính chuyển động
• transition-duration: Khoảng thời gian diễn ra hiệu ứng
• transition-timing-function: Hiệu ứng sẽ sử dụng
• transition-delay: thời gian chờ trước khi xảy ra hiệu ứng

Bạn có thể hiểu các tính chất hơn qua ví dụ dưới. Ở đây để ngắn gọn, tôi chỉ sử dụng -webkit

.testtrans{
    margin: 10px;
    /* Các thuộc tính sẽ chuyển động */
    width: 100px;
    height: 80px;
    background-color: #FC0;
    /* Bắt đầu Transition */
   -webkit-transition-property: width, height, background-color; /* Khai báo thuộc tính sẽ có hiệu ứng tác dụng */
   -webkit-transition-duration: 0.5s, 1s, 1s;  /* Đặt thời gian cho từng hiệu ứng */
   -webkit-transition-timing-function: ease, ease-out, ease; /* Hiệu ứng cho từng thuộc tính */
   -webkit-transition-delay: 0s ,0.5s, 1.5s; /* Thời gian chờ */
}
 
.testtrans:hover{
    width: 200px;
    height: 200px;
    background-color: #09C;
    -webkit-transition-property: width, height, background-color; 
    -webkit-transition-duration: 0.5s, 1s, 0.5s; 
    -webkit-transition-timing-function: linear, linear, ease;
    -webkit-transition-delay: 0s ,0s, 0s;
}

Trong ví dụ trên, khi bạn di chuột vào sẽ thấy chiều rộng, chiều cao và mầu nền thay đổi cùng một lúc (do tôi đặt thời gian chờ khi hover là 0s)

Bạn nên tự làm lại các ví dụ trong bài để hiểu rõ hơn về CSS3 transition.

Cách viết tắt

Ngay trong ví dụ đầu tiên bạn đã thấy cách viết tắt của transition, cấu trúc như sau:

transition: property, duration, timing-function, delay

Tất nhiên bạn cần thêm -moz và -webkit vào trước (sau này có thể có -ms của Microsoft)

Bạn có thể xem thêm -moz-transition và -webkit-transition để hiểu rõ hơn vấn đề