CSS Note 6: Transition

Một trong các kỹ thuật phổ biến ở các website hiện đại là có các hiệu ứng chuyển động cho từng đối tượng rất đẹp mắt được làm hoàn toàn bằng CSS3, khi mà trước đây đa phần các hiệu ứng chuyển động phải cần có sự trợ giúp của Javascript. Trong CSS3 có thuộc tính transition giúp bạn tạo ra các hiệu ứng chuyển động của một đối tượng tron website dễ dàng mà không cần phải dùng thêm Javascript.

Cấu trúc khai báo transition như sau:

transition: [thuộc tính chuyển động] [thời gian chuyển động] [thời gian delay] [kiểu chuyển động];

Lưu ý rằng transition là thuộc tính CSS3 nên bạn cần nên khai báo thêm hai thuộc tính tương tự kèm hai tiền tố -moz- và -webkit- để nó hoạt động tốt trên mọi trình duyệt. Ví dụ:

01 02 03 04 05 06

<br /> #box {<br />   transition: margin-left 2s 0.5s ease-in-out;<br />   -moz-transition: margin-left 2s 0.5s ease-in-out;<br />   -webkit-transition: margin-left 2s 0.5s ease-in-out;<br /> }<br />

Trong đó, margin-left là thuộc tính mà bạn cần nó sẽ kích hoạt chuyển động nhưng không phải thuộc tính nào cũng có thể chuyển động mà nó chỉ có tác dụng với các hiệu ứng trong danh sách này, bạn có thể sửa thành all để nó áp dụng lên toàn bộ thuộc tính, 2s là thời gian diễn ra sự chuyển động và 0.5s là thời gian trễ khi sự kiện bắt đầu, ease-in-out là kiểu chuyển động nhanh ở lúc bắt đầu và chậm ở lúc kết thúc. Phần kiểu chuyển động bạn có thể không cần khai báo, hãy xem thêm các kiểu chuyển động tại đây.

Bây giờ bạn đã khai báo cho #box áp dụng hiệu ứng chuyển động rồi, nhưng để vậy nó sẽ không chuyển động mà sẽ bắt buộc có thêm một sự kiện xảy ra để nó kích hoạt. Ví dụ mình sẽ viết thêm CSS với pseudo-class là :hover để tiến hành sửa giá trị margin-right và lúc này nó sẽ chuyển động dựa theo giá trị mới.

01 02 03

#box:hover {<br />   margin-left: 150px;<br /> }

Bạn xem ví dụ live ở dưới.

Tóm lại khi tạo hiệu ứng chuyển động là bạn phải đặt thuộc tính transition vào phần tử muốn làm chuyển động, và nhớ khai báo thuộc tính chuyển động. Sau đó bạn phải thiết lập thêm sự kiện chuyển động thông qua các pseudo class hoặc thậm chí là Javascript nếu bạn biết ngôn ngữ này.

Ngoài ra, bạn còn có thể thiết lập chuyển động cho nhiều thuộc tính khác nhau bằng cách thêm dấu phẩy như dưới đây.

01 02 03 04 05 06

<br /> #box {<br />   transition: margin-left 2s, background-color 1s;<br />   -moz-transition: margin-left 2s, background-color 1s;<br />   -webkit-transition: margin-left 2s, background-color 1s;<br /> }<br />

Ví dụ thực tế:

Đơn giản phải không nào? Hy vọng là với kiến thức về transition thì bạn sẽ cảm thấy mình làm được nhiều điều thú vị hơn với CSS và thực tế còn rất nhiều cái thú vị nữa mà mình sẽ tiếp tục hướng dẫn ở các bài sau.

Ngoài thuộc tính transition của CSS3 giúp bạn tạo ra các hiệu ứng chuyển động của các phần tử trong website, thì nó còn một thuộc tính khác được sử dụng kèm với transition rất thường xuyên đó là thuộc tính transform có chức năng đổi hình dạng các phần tử block trong website.

Thay đổi hình dạng với transform

Với transform, bạn có thể xoay, co giãn kích thước hoặc bóp nghiêng hình dạng một phần tử. Ngoài ra nó cũng còn một số tính năng khác cũng liên quan đến việc làm thay đổi hình dạng.

Cách viết:

01 02 03 04

<br /> transform: function( value );<br /> -moz-transform: function( value );<br /> -webkit-transform: function( value );<br />

Trong đó, function() là tên hàm làm thay đổi hình dạng và value là giá trị của hàm, mỗi hàm có thể sẽ có cách viết giá trị khác nhau.

Về các hàm làm thay đổi hình dạng cho transform thì có rất nhiều nhưng mình chỉ nói qua một số hàm đơn giản thường dùng nhất.

Các hàm chuyển động của transform

Xoay – rotate()

Với hàm rotate() bạn có thể thiết lập một đối tượng bị xoay theo độ góc. Ở hàm này bạn có thể thiết lập giá trị kiểu  [n]deg (thiết lập giá trị góc, tức là độ) hoặc [n]turn (1 turn = 360 độ). Bạn hãy xem ví dụ live dưới đây để hiểu hơn.

Co giãn – scale()

Với hàm scale() bạn có thể thiết lập co giãn kích thước của một phần tử dựa vào trục y (trục thẳng đứng) và trục x (trục ngang), và hàm này bạn sẽ thiết lập là scale(X) hoặc scaleX() và scaleY().

Kéo nghiêng – skew()

Bạn có thể kéo một đối tượng nghiêng dựa theo trục Y và trục X với hàm skewX() và skewY(), giá trị bên trong là số [n]deg tương tự rotate().

Tùy chỉnh tâm hình dạng với transform-origin

Một thuộc tính thú vị nữa mà bạn có thể dùng kèm theo transform đó là transform-origin, nó sẽ cho phép bạn dịch chuyển phần tử dựa vào kiểu thay đổi hình dạng ở transform. Nói nghe có vẻ khó hiểu, ví dụ bạn sử dụng rotate() để xoay ảnh và khi dùng thêm transform-origin thì nó sẽ cho phép bạn chỉnh độ lớn của vòng xoay tính từ tâm phần tử. Thuộc tính transform-origin phải được dùng kèm với transform và có thể áp dụng cho bất kỳ hàm nào.

Thuộc tính transform-origin có hai giá trị là X (phương thẳng đứng) và Y (phương nằm ngang) và giá trị nó sẽ dựa vào kích thước của phần tử.

01	transform-origin: 100% 50%;

Lời kết

Bây giờ bạn đã thấy CSS thực sự thú vị chưa nào? Nhưng nhiêu đó vẫn chưa hết đâu vì CSS3 còn làm được nhiều cái rất hay nữa, thậm chí nó có thể làm chuyển động 3D hoặc vẽ các khối hình học rất hay. Tuy nhiên ở serie CSS cơ bản này, mình sẽ dừng lại ở transform vì bấy nhiêu đó đã quá đủ cho các kiến thức CSS cơ bản rồi. Những tính năng nâng cao hơn mình sẽ hướng dẫn ở serie CSS nâng cao.