Học làm web (52) - CSS căn bản (28)

Tiếp theo của: Học làm web (51) - CSS căn bản (27)
----

2.7       Transition, transforms và animation


Ở các phần trước đã thấy được khả năng của CSS trong việc tạo các hiệu ứng trên hình ảnh như bo góc (rounded corner), tạo nền chuyển sắc (color gradient), tạo bóng (shadow). Các hiệu ứng này trước đây phải tạo bằng các phần mềm xử lý ảnh, lưu thành tập tin hình ảnh, rồi mới chèn vào trang web.

Phần này tiếp tục tìm hiểu về các hiệu ứng động của CSS, những hiệu ứng mà trước đây phải xử lý bằng JavaScript hoặc Flash.

2.7.1       CSS transition


Transition là sự chuyển tiếp, sự chuyển đổi. Ví dụ dễ thấy nhất về transition là các nút điều hướng trên giao diện, khi đưa chuột vào, màu nền và màu chữ sẽ từ từ chuyền thành màu khác, khi bỏ chuột ra, màu nền và chữ lại trở về trạng thái ban đầu.

Dưới đây là một số thuộc tính liên quan đến transition,

– transition-property: cho biết những thuộc tính nào sẽ được thiết lập transition

– transition-duration: thời gian thực hiện việc chuyển đổi

– transition-timing-function: cách thức chuyển đổi

– transition-delay: thiết lập độ trễ

Để bắt đầu một transition, cần có sự kiện để kích hoạt, thường là các sự kiện thay đổi trạng thái của các phần tử, như :hover, :focus, :active.

Ví dụ sau sẽ thiết lập hiệu ứng transition cho phần tử a, thuộc tính sẽ bị thay đổi là background-color, khi rê chuột vào phần tử a, màu nền sẽ chuyển sang màu đỏ, khi rê chuột ra, màu nền sẽ chuyển lại màu xanh. Thời gian thực hiện việc chuyển đổi là 0.3s.

[HTML]

<a href="" class="smooth">Mượt mà</a>

[CSS]

a.smooth {
            display: block;
            text-decoration: none;
            text-align: center;
            padding: 1em 2em;
            background-color: mediumblue;
            color: #fff;
            width: 10em;
            border-radius: 1.5em;
            transition-property: background-color;
            transition-duration: 0.3s;
}          
a.smooth:hover {
            background-color: red;
}

Thuộc tính transition-property

Để chỉ định các thuộc tính sẽ thiết lập transition, sử dụng transition-property. Sau đây là một số đặc tính của transition-property,

– Giá trị: tên thuộc tính | all | none

– Mặc định: all

– Áp dụng: mọi phần tử, các phần tử giả (pseudo-element) :after và :before

– Kế thừa: không

Có thể thiết lập transition cho rất nhiều thuộc tính, bảng dưới đây liệt kê các thuộc tính đó (lưu ý, cần cập nhật bảng này theo thời gian, vì nó tùy thuộc vào sự phát triển của các trình duyệt),

Nhóm        
Tên thuộc tính
Backgrounds
background-color, background-position
Borders và outlines
border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-top-color, border-top-width, border-spacing, outline-color, outline-offset, outline-width
Color và opacity
color, opacity, visibility
Font và text
font-size, font-weight, letter-spacing, line-height, text-indent, text-shadow, word-spacing, vertical-align
Kích thước
height, width, max-height, max-width, min-height, min-width, margin-bottom, margin-left, margin-right, margin-top, padding-bottom, padding-left, padding-right, padding-top, crop
Position
top, right, bottom, left, z-index, clip
Transforms
transform, transform-origin

Thời gian thực hiện transition

Để thiết lập thời gian thực hiện transition sử dụng transition-duration. Sau đây là một số đặc tính của transition-duration,

– Giá trị: thời gian

– Mặc định: 0s

– Áp dụng: mọi phần tử, các phần tử giả (pseudo-element) :after và :before

– Kế thừa: không      

Thời gian thực hiện transition có thể được tính bằng giây (s) hoặc mili giây (ms). Ở ví dụ trên đã thiết lập transition-duration là 0.3 giây. Khoảng thời gian nên vừa đủ để người dùng nhận ra sự thay đổi của đối tượng, nhưng không nên quá dài gây ra cảm giác trì trệ, chậm chạp từ người dùng. Không có giá trị lý tưởng, tuy nhiên, giá trị thường được sử dụng là 0.2s hoặc 0.3s

Cách thức chuyển đổi

Để thiết lập cách thức thực hiện transition sử dụng transition-timing-function. Sau đây là một số đặc tính của transition-timing-function,

– Giá trị: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps | cubic-bezier(#, #, #, #)

– Mặc định: ease

– Áp dụng: mọi phần tử, các phần tử giả (pseudo-element) :after và :before

– Kế thừa: không       

Ngoài hai thuộc tính quan trọng là transition-propertytransition-duration, transition-timing-function cho phép điều chỉnh quá trình chuyển đổi; ví dụ, ban đầu là chậm, sau đó nhanh dần; hoặc ban đầu nhanh, sau đó chậm dần; hoặc luôn luôn duy trì một tốc độ.

Ví dụ,

a.smooth {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

Dưới đây là ý nghĩa một số giá trị của thuộc tính transition-timing-function,

Giá trị
Ý nghĩa
Ease
Bắt đầu chậm, sau đó nhanh dần, rồi chậm dần, và kết thúc. Đây là giá trị mặc định.
Linear
Luôn duy trì một tốc độ từ đầu đến cuối
ease-in
Bắt đầu chậm, sau đó nhanh dần
ease-out
Bắt đầu nhanh, sau đó chậm dần
ease-in-out
Bắt đầu chậm, sau đó nhanh dần, sau đó chậm dần vào lúc cuối. Tương tự như ease, nhưng sự thay đổi ở khúc giữa không nhiều
cubic-bezier (#, #, #, #)
Mô tả sự thay đổi tốc độ bằng hàm Bezier

Thiết lập độ trễ

Để thiết lập độ trễ cho quá trình thực hiện transition sử dụng transition-delay. Ví dụ, khi người dùng rê chuột lên một phần tử, nếu muốn sau 0.2s, quá trình transition mới bắt đầu, thì thiết lập transition-delay: 0.2s. Sau đây là một số đặc tính của transition-delay,

– Giá trị: thời gian

– Mặc định: 0s

– Áp dụng: mọi phần tử, các phần tử giả (pseudo-element) :after và :before

– Kế thừa: không

Ví dụ,

a.smooth {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
}

Lưu ý, ở các phần trên, để đơn giản, nên đã bỏ qua vấn đề tương thích với các trình duyệt. Vì vậy, khi sử dụng, cần thêm tiếp đầu ngữ (prefixed properties) để trang web hoạt động tốt trên các trình duyệt, trên các phiên bản cũ; đồng thời cũng bao gồm đoạn mã không có tiếp đầu ngữ để làm việc với các trình duyệt phiên bản mới. Ví dụ, trong thực tế, đoạn mã thiết lập transition cho phần tử a sẽ được viết đầy đủ như sau,

a.smooth {
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0.2s;

-moz-transition-property: background-color;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
-moz-transition-delay: 0.2s;

-o-transition-property: background-color;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-in-out;
-o-transition-delay: 0.2s;

-ms-transition-property: background-color;
-ms-transition-duration: 0.3s;
-ms-transition-timing-function: ease-in-out;
-ms-transition-delay: 0.2s;

transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
}

Viết rút gọn của transition

Để viết mã gọn gàng hơn, nên sử dụng cách viết rút gọn của transition. Đây là cú pháp,
transition: property duration timing-function delay;

Sau từ khóa transition là giá trị của các thuộc tính, mỗi giá trị cách nhau một khoảng trắng. Nếu chỉ cung cấp một giá trị về thời gian thì đó được ngầm hiểu là transition-duration. Nếu có hai giá trị thời gian thì luôn đảm bảo là giá trị của transition-duration sẽ được viết trước.

Ví dụ,

Thiết lập transition trên phần tử a sẽ được viết rút gọn là,

a.smooth {
transition: background-color 0.3s ease-in-out 0.2s;
}

Cách viết có thêm tiền tố của các trình duyệt sẽ là,

a.smooth {
-webkit-transition: background-color 0.3s ease-in-out 0.2s;
-moz-transition: background-color 0.3s ease-in-out 0.2s;
-o-transition: background-color 0.3s ease-in-out 0.2s;
-ms-transition: background-color 0.3s ease-in-out 0.2s;
transition: background-color 0.3s ease-in-out 0.2s;
}

Áp dụng transition trên nhiều thuộc tính

Ở các phần trên, mới thực hiện transition trên một thuộc tính (background-color), để thực hiện trên nhiều thuộc tính chỉ việc liệt kê tên thuộc tính tại transition-property, mỗi giá trị cách nhau một dấy phẩy (,).

Ví dụ, khi người dùng rê chuột vào phần tử a, sẽ chuyển nền thành màu đỏ, khoảng cách hàng tăng thêm một chút và chữ chuyển thành màu đen,

a.smooth {
transition-property: background-color, color, letter-spacing;
transition-duration: 0.3s, 2s, 0.3s;
transition-timing-function: ease-out, ease-in, ease-out;
}
a:hover {
background-color: red;
letter-spacing: 3px;
color: black;
}

Các giá trị trong danh sách thuộc tính sẽ được áp dụng tuần tự tương ứng. Cụ thể, các giá trị sẽ được áp dụng là 0.3sease-out cho background-color, 2s và ease-in cho color, 0.3s và ease-out cho letter-spacing.

Nếu một danh sách có ít giá trị hơn các danh sách còn lại, thì trình duyệt sẽ tự động xoay vòng danh sách để lấy giá trị kế tiếp. Ví dụ, nếu transiton-duration: 0.3s, 2s; nghĩa là chỉ có hai giá trị, thì letter-spacing sẽ được gán giá trị đầu tiên trong danh sách là 0.3s.

Cũng có thể viết theo kiểu rút gọn như sau,

a.smooth {
transition: background-color 0.3s ease-out, color 2s ease-in, letter-spacing 0.3s ease-out;
}

Thiết lập một transition cho mọi trường hợp

Nếu muốn áp dụng cùng một giá trị về: thời gian, kiểu và độ trễ, cho tất cả các transition, chỉ việc sử dụng giá trị all cho transition-property.

Ví dụ sau sẽ thiết lập thời gian là 0.2s và kiểu là ease-in-out cho mọi thay đổi trên phần tử a.

a.smooth {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}
-----------
Cập nhật [7/8/2018]
-----------
Xem thêm: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (53) - CSS căn bản (29)