Transitions là một hiệu ứng mới trong CSS3, nó giúp các bạn tạo ra những hiệu ứng đẹp hơn trong trình bày trang web mà không cần phải sử dụng đến ảnh động hay các ngôn ngữ lập trình phức tạp khác như Javascripts, Flash… Hôm nay chúng ta sẽ cùng tìm hiểu về cấu trúc và cách sử dụng của nó.
(Đưa chuột qua đối tượng dưới đây để xem hiệu ứng)
[jsf url=”http://jsfiddle.net/nphunghung/SuY7N/” h=”150″ incl=”result” ]
Thuộc tính transition là một thuộc tính viết tắt sử dụng để dại diện cho 4 thuộc tính liên quan. Cấu trúc của nó như sau:
[code=’css’].vidu {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}[/code]
Các thuộc tính transition cho phép phần tử thay đổi giá trị trong một thời gian quy định, chuyển động theo các thuộc tính định sẵn, thay vì chúng xảy ra ngay lập tức. Đây là một ví dụ đơn giản về quá trình chuyển đổi màu nền của một phần tử <div> khi đưa chuột qua (:hover:)
[code=’css’]div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}[/code]
Thẻ Div đó sẽ mất một nửa giây để biến từ màu đỏ sang màu xanh lá cây khi rê chuột qua nó. Sau đây là một ví dụ cho một quá trình chuyển đổi như vậy:
[jsf url=”http://jsfiddle.net/nphunghung/TFCm3/” h=”190″ incl=”result,html,css”]
Bạn có thể chỉ định một thuộc tính cụ thể như mình đã nêu trên (background-color), hoặc sử dụng giá trị của “all” để hiệu ứng transition có giá trị với tất cả các thuộc tính. Ví dụ:
[code=’css’]div {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
div:hover {
background: green;
padding: 20px;
}[/code]
Trong ví dụ này, cả màu nền và padding sẽ chuyển đổi do ta đã đặt giá trị “all” cho thuộc tính transition-property.
Bạn có thể sử dụng dấu phẩy để đặt các giá trị khác nhau cho các thuộc tính khác nhau. Ví dụ:
[code=’css’]div {
transition: background 0.2s ease,
padding 0.8s linear;
}[/code]
Trong hầu hết các trường hợp, thứ tự của các giá trị không quan trọng, trừ khi giá trị delay được xác định. Nếu bạn đặt giá trị cho delay, trước tiên bạn phải xác định một khoảng thời gian chạy hiệu ứng. Giá trị đầu tiên mà trình duyệt đọc được, nếu là một giá trị thời gian hợp lệ thì nó sẽ luôn luôn là thời gian diễn ra hiệu ứng. Bất kỳ giá trị thời gian hợp lệ sau đó sẽ được phân tích như thời gian chờ đợi trước khi hiệu ứng chuyển đổi bắt đầu.
Một số thuộc tính có thể không được chuyển đổi vì nó không phải thuộc tính “động”. Xem danh sách đầy đủ cách thuộc tính “động” để biết cái nào có thể áp dụng được với transition.
Khi xác định quá trình chuyển đổi trên các thuộc tính, bạn có thể xác định quá trình chuyển đổi xảy ra trong cả 2 hướng. Đó là, khi style được thay đổi (ví dụ như di chuột qua đối tượng), thuộc tính sẽ chuyển đổi; và khi thay đổi style trở lại (ví dụ di chuột ra khỏi đối tượng). Ví dụ, quá trình chuyển đổi giới thiệu sau đây khi di chuột qua, nhưng không có khi di chuột ra:
[CodePen height=220 show=result href=ivJfz user=nphunghung ]
Điều này xảy ra bởi vì quá trình chuyển đổi đã được chuyển đến đối tượng có :hover và không có quá trình chuyển đổi phù hợp trên đối tượng không được lựa chọn bởi :hover.
Để tương thích trong tất cả các trình duyệt hỗ trợ, bạn nên thêm các tiền tố mà các trình duyệt yêu cầu, với cú pháp tiêu chuẩn như sau:
[code=’css’].vidu {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}[/code]
Với IE10 (là phiên bản ổn định đầu tiên của IE hỗ trợ hiệu ứng transition) không yêu cầu tiền tố -ms-.
Bài này mình xin dừng lại ở đây. Trong bài sau, mình sẽ hướng dẫn các bạn chi tiết về các thuộc tính của hiệu ứng transition.
Tham khảo css-trick
