CSS3 Animation #1: Transition

Đăng bởi Neo trong mục Hướng dẫn vào 02 tháng 7, 2010 | Comments

Các hiệu ứng chuyển động trong CSS3 đều từ 2 thuộc tính chính là Transition và Animation. Từ 2 thuộc tính này bạn có thể làm rất nhiều hiệu ứng mà không cần tới javascript. Ở phần này chúng ta sẽ nói về transition.

Đế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-webkit-transition để hiểu rõ hơn vấn đề

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter