----
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-property và transition-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.3s và ease-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: Học làm web (53) - CSS căn bản (29)