- Các thuộc tính biến hình CSS
- Thuộc tính transition-property
- Thuộc tính transition-timing-function
- Thay đổi giá trị với Javascript
- Thuộc tính transition
Các thuộc tính về hiệu ứng biến hình
Trong CSS có các thiết lập để giá trị của một thuộc tính (như chiều rộng phần tử width) thay đổi từ giá trị này sang giá trị khác thể hiện ngay ngay trong trình duyệt một cách mềm mại liên tục (hiệu ứng động). Một hiệu ứng biến hình là một hiệu ứng động, giá trị của một thuộc tính cụ thể (màu sắc, kích thước ...) được thay đổi mềm mại liên tục chứ không thay đổi một cách đột ngột.
Các thuộc tính về biến hình như:
- transition-property: liệt kê các thuộc tính có hiệu ứng biến hình, các thuộc tính cách nhau bởi dấu
- transition-duration: khoảng thời gian chuyển đổi diễn ra (giây)
- transition-timing-function: bước thay đổi
- transition-delay: khoảng thời gian dừng (trễ) cho mỗi hiệu ứng chuyển đổi (s)
Hiệu ứng biến hình CSS sử dụng phổ biến trong các giao diện ngày nay. Tuy vậy, không phải tất cả các thuộc tính CSS có thể biến đổi liên tục từ giá trị này sang giá trị khác, chỉ có một số lượng hạn chế các thuộc tính có thể áp dụng vào hiệu ứng biến hình: danh sách các thuộc tính css có thể áp dụng hiệu ứng động
Khi bạn chỉ ra có hiệu ứng biến hình trên thuộc tính nào đó (thông qua transition-property), thì khi thay đổi giá trị của thuộc tính đó hiệu ứng động sẽ xảy ra. Giá trị thuộc tính thay đổi chủ yếu bằng sử dụng mã JavaScript để thay đổi và thiết lập. Ngoài ra cũng có thể thay đổi theo trạng thái của của phần tử: Như chiều rộng phần tử ở trạng thái bình thường và chiều rộng phần tử ở trạng thái có chuột phía trên (hover - xem thêm chọn phần tử theo pseudo class để biết chi tiết)
Có đoạn mã HTML/CSS ban đầu như sau:
<style>
.ele {
width: 25%;
height: 50px;
background-color: #e91e63;
color: white;
}
</style>
<div class="ele">
Hiệu ứng biến hình
</div>
Thuộc tính transition-property và transition-duration
Thuộc tính transition-property để liệt kê các thuộc tính CSS có thể xảy ra biến đổi liên tục (biến hình) khi thay đổi giá trị, còn transition-duration để ấn định thời gian diễn ra hiệu ứng.
transition-property: none | all | property1, property2 ...;
transition-duration: time(s);
Bây giờ ta sẽ thiết lập Box có hiệu ứng biến hình, để chỉ ra thuộc tính nào sẽ có hiệu ứng động biến hình thì liệt kê tên thuộc tính thông qua thuộc tính transition-property, để thiết lập thời gian hiệu ứng động xảy ra dùng thuộc tính transition-duration
<style>
.trans1 {
transition-property: width; /* Thiết lập thuộc tính width động nếu giá trị của nó thay đổi */
transition-duration: 2s; /* Hiệu ứng động xảy ra trong 2s */
}
.trans1:hover {
width: 100%; /* Khi con trỏ chuột phía trên, width thay đổi thành 100% ->
Hiệu ứng động sẽ xảy ra */
height: 100px; /* height cũng thay đổi, nhưng nó không được chỉ ra trong transition-property
nên không có sự biến đổi liên tục về giá trị chiều cao */
}
</style>
<div class="ele trans1">
Hiệu ứng biến hình
</div>
Kết quả, bạn hãy để chuột ở trên phần tử để xảy ra hiệu ứng động
Bạn thấy chiều rộng biến đổi một cách liên tục do hiệu ứng động, còn chiều cao thì không, nếu muốn cả chiều cao cũng xảy ra hiệu ứng thì cho tên thuộc tính height vào transition-property
<style>
.trans2 {
transition-property: width, height; /* width, height cùng có hiệu ứng động */
transition-duration: 2s;
}
.trans2:hover {
width: 100%;
height: 100px;
}
</style>
<div class="ele trans2">
Hiệu ứng biến hình
</div>
Kể cả các thuộc tính chuyển đổi transform cũng có thể đưa vào hiệu ứng biến hình transition
<style>
.trans3 {
transition-property: transform, height, width;
transition-duration: 2s;
}
.trans3:hover {
height: 300px;
width: 300px;
transform: translateX(200px) rotate(45deg);
}
</style>
<div class="ele trans3">
Hiệu ứng biến hình
</div>
Thuộc tính transition-timing-function
Thuộc tính này chỉ ra tốc độ thay đổi khi chuyển đổi
easebắt đầu chậm, rồi tăng dần (mặc định)ease-inchậm, tăng dần, dừng đột ngộtease-outchậm dần đềuease-in-outgiốngeasenhưng mịn hơnlinearthay đổi đều đều
Ngoài ra có hàm cubic-bezier() để định nghĩa theo hàm đồ thị hàm cubic-bezier, ví dụ
transition-timing-function: cubic-bezier(0,0,1,1);
<style>
.trans4 {
transition-property: height, width;
transition-duration: 2s;
transition-timing-function: cubic-bezier(1,0,1,0);
}
.trans4:hover {
height: 100px;
width: 100%;
}
</style>
<div class="ele trans4">
Hiệu ứng biến hình
</div>
Sử dụng Javascript thay đổi giá trị
Các ví dụ trên, các giá trị thuộc tính của phần tử cần có hiệu ứng động như width, height ... được thay đổi giá trị khi phần tử ở trạng thái :hover (dùng CSS). Ngoài ra, có thể chủ động thay đổi giá trị thuộc tính để có hiệu ứng động biến hình bằng Javascript, bạn có thể tham khảo - cách thay đổi giá trị CSS của phần tử bằng JS: Cập nhật Style với JS
Ví dụ: bấm vào nút bấm để thay đổi chiều rộng - và chiều cao
<style>
.trans5 {
transition-property: height, width;
transition-duration: 5s;
transition-timing-function: ease-in-out;
}
</style>
<button onclick="changewidth()">Đổi chiều rộng</button>
<button onclick="changeheight()">Đổi chiều cao</button>
<hr>
<div class="ele trans5">
Hiệu ứng biến hình
</div>
<script>
function changewidth() {
var e = document.getElementsByClassName('trans5')[0];
if (e.style.width != '30%')
{
e.style.width = "30%";
e.textContent = 'w=30%';
}
else
{
e.style.width = "100%";
e.textContent = 'w=100%';
}
}
function changeheight() {
var e = document.getElementsByClassName('trans5')[0];
if (e.style.height != '40px')
{
e.style.height = "40px";
e.textContent = 'h=40px';
}
else
{
e.style.height = "150px";
e.textContent = 'h=150px';
}
}
</script>
Thuộc tính transition
Thuộc tính transition là cách viết ngắn gọn gộp lại của các thuộc tính transition-property, transition-duration, transition-timing-function, transition-delay.
Cú pháp cơ bản:
transition: transition1, [transition2] ...
Tức nó có thể liệt kê nhiều transition như transition1, transition2, transition3 ... Trong đó mỗi transition1, transition2 ... được viết như sau:
transition-property transition-duration transition-timing-function
Ví dụ:
<style>
.trans6 {
transition: width 1s ease-in-out, background-color 2s ease, font-size 3s linear;
}
.trans6:hover {
width: 100%;
background-color: blue;
font-size: 40px;
}
</style>
<div class="ele trans6">
Hiệu ứng biến hình
</div>
