Cách tạo hiệu ứng chuyển động cho phần tử HTML

– Thông thường, khi chúng ta muốn thiết lập hiệu ứng chuyển động cho một phần tử nào đó thì về cơ bản chúng ta cần phải thực hiện hai công việc.

Công việc thứ nhất là tạo một cái @keyframes.
Công việc thứ hai là sử dụng các thuộc tính animation để áp dụng @keyframes lên phần tử.

Ví dụ:

– Tôi có một đoạn mã như bên dưới.

<!DOCTYPE html>
<html>
<head>
    <title>Tiêu đề của trang web</title>
    <style type="text/css">
        #test{
            background-color:green;
            width:100px;
            height:100px;
            position:relative;
            left:0px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

– Màn hình trình duyệt sẽ hiển thị là.

– Bây giờ, tôi muốn tạo hiệu ứng chuyển động cho phần tử #test.

(tôi muốn nó di chuyển sang bên phải 500px rồi trở về vị trí cũ, tiếp tục lặp lại hành động này)

– Để làm được điều đó thì trước tiên tôi tạo một cái @keyframes có tên là move_right, nó sẽ cung cấp cho trình duyệt các thông tin như:

Ở thời điểm 0% (khi hiệu ứng chuyển động chưa diễn ra) phần tử sẽ nằm ở vị trí left 0px.
Ở thời điểm 100% (khi hiệu ứng chuyển động đã kết thúc) phần tử sẽ nằm ở vị trí left 500px.

@keyframes move_right{
    0%{
        left:0px;
    }
    100%{
        left:500px;
    }
}

– Sau khi đã xây dựng xong cái @keyframes, tôi sẽ sử dụng các thuộc tính animation để áp dụng cái @keyframes đó lên phần tử.

– Trong trường hợp này thì tôi sử dụng ba thuộc tính:

Thuộc tính animation-name dùng để xác định tên của cái @keyframes mà tôi muốn áp dụng lên phần tử.
Thuộc tính animation-duration dùng để xác định “thời lượng” của một chu kỳ hiệu ứng chuyển động (tôi thiết lập 3 giây)
Thuộc tính animation-iteration-count dùng để xác định “số lần lặp lại” một chu kỳ hiệu ứng chuyển động (tôi thiết lập giá trị infinite có nghĩa là không giới hạn số lần lặp lại)

animation-name:move_right;
animation-duration:3s;
animation-iteration-count:infinite;

Xem ví dụ

1) Cách tạo một cái @keyframes

– @keyframes đóng vai trò giống như là một cái mô hình dùng để mô tả định dạng (style) của phần tử tại những thời điểm khác nhau trong quá trình diễn ra hiệu ứng chuyển động.

– Để tạo một cái @keyframes thì chúng ta sử dụng cú pháp như sau:

@keyframes tên-keyframes {
    thời điểm 1 {
        thuộc tính 1 : giá trị của thuộc tính ở thời điểm 1;
        thuộc tính 2 : giá trị của thuộc tính ở thời điểm 1;
        thuộc tính 3 : giá trị của thuộc tính ở thời điểm 1;
    }
    thời điểm 2 {
        thuộc tính 1 : giá trị của thuộc tính ở thời điểm 2;
        thuộc tính 2 : giá trị của thuộc tính ở thời điểm 2;
        thuộc tính 3 : giá trị của thuộc tính ở thời điểm 2;
    }
    thời điểm 3 {
        thuộc tính 1 : giá trị của thuộc tính ở thời điểm 3;
        thuộc tính 2 : giá trị của thuộc tính ở thời điểm 3;
        thuộc tính 3 : giá trị của thuộc tính ở thời điểm 3;
    }
}

Ví dụ:

@keyframes move{
    0%{
        top:0px;
        left:0px;
        background-color:blue;
    }
    10%{
        top:0px;
        left:400px;
        background-color:red;
    }
    40%{
        top:200px;
        left:400px;
        background-color:green;
    }
    100%{
        top:0px;
        left:0px;
        background-color:blue;
    }
}

Xem ví dụ

– Dưới đây là một số điều mà chúng ta cần phải lưu ý khi tạo @keyframes.

⛔ Đối với những hiệu ứng chuyển động làm thay đổi vị trí của phần tử thì chúng ta phải thiết lập cho phần tử thuộc tính position với một trong các giá trị là relative, absolute, fixed. Bởi vì nếu không thiết lập các giá trị này thì phần tử sẽ không thể di chuyển được.

⛔ Đối với những hiệu ứng chuyển động làm thay đổi kích thước của phần tử thì các bạn cần phải cân nhắc việc thiết lập thuộc tính position với giá trị absolute hoặc fixed cho phần tử. Bởi vì nếu không thiết lập một trong hai giá trị này thì khi phần tử thay đổi kích thước, nó sẽ làm ảnh hưởng đến vị trí của các phần tử xung quanh.

⛔ Tại mỗi mốc thời điểm, chúng ta nên khai báo đầy đủ những thuộc tính được nhắc đến trong hiệu ứng chuyển động (chẳng hạn như cái ví dụ minh họa phía trên, tại bốn mốc thời điểm 0% 10% 40% 100% tôi đều khai báo đầy đủ ba thuộc tính top, left, background-color)

⛔ Thời điểm 0% có thể thay thế bằng chữ from, thời điểm 100% có thể thay thế bằng chữ to.

2) Danh sách các thuộc tính animation

– Dưới đây là danh sách các thuộc tính nằm trong nhóm animation.

(các bạn vui lòng bấm vào hình để xem chi tiết chức năng & cách sử dụng của từng thuộc tính)

animation-name	– Thuộc tính này dùng để xác định tên của cái @keyframes mà chúng ta muốn áp dụng lên phần tử để tạo hiệu ứng chuyển động.
animation-duration	– Thuộc tính này dùng để thiết lập “thời lượng” của một chu kỳ hiệu ứng chuyển động.
animation-iteration-count	– Thuộc tính này dùng để thiết lập “số lần lặp lại” một chu kỳ hiệu ứng chuyển động.
animation-delay	– Thuộc tính này dùng để thiết lập “khoảng thời gian phải chờ đợi” trước khi hiệu ứng chuyển động được diễn ra.
animation-direction	– Thuộc tính này dùng để “điều hướng” hiệu ứng chuyển động.
animation-fill-mode	– Thuộc tính này dùng để chỉ định bộ định dạng (style) mà phần tử sẽ được áp dụng ở thời điểm trước khi hiệu ứng chuyển động diễn ra & sau khi hiệu ứng chuyển động kết thúc.
animation-play-state	– Thuộc tính này dùng để tùy chỉnh việc tiếp tục hay tạm ngưng hiệu ứng chuyển động.
animation-timing-function	– Thuộc tính này dùng để tùy chỉnh “tốc độ chuyển động” của hiệu ứng ở từng giai đoạn.
animation	– Thuộc tính này là cú pháp tổng quát dùng để thiết lập hiệu ứng chuyển động cho phần tử (thay vì phải kết hợp các thuộc tính animation riêng lẻ phía trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)

3) Cách áp dụng nhiều @keyframes lên một phần tử

– Trong các ví dụ minh họa ở trên, những cái hiệu ứng chuyển động do tôi tạo ra đều là hiệu ứng chuyển động thuộc loại đơn giản nhất. Sau này, tùy vào công việc mà các bạn sẽ phải tạo ra những cái hiệu ứng chuyển động phức tạp hơn rất nhiều, nếu chỉ sử dụng duy nhất một cái @keyframes thì sẽ không thể nào đáp ứng được yêu cầu, khi đó chúng ta cần phải áp dụng nhiều @keyframes lên phần tử.

– Để áp dụng nhiều @keyframes lên một phần tử thì khi thiết lập giá trị cho thuộc tính animation-name, chúng ta cần phải gán nhiều @keyframes & kèm theo một dấu phẩy nằm giữa mỗi hai @keyframes.

Ví dụ:

– Tôi tạo hiệu ứng chuyển động cho phần tử #test bởi ba @keyframes: move, reSize, bgColor

#test{
    background-color:green;
    width:50px;
    height:50px;
    position:relative;
    animation-name:move,reSize,bgColor;
    animation-duration:3s;
    animation-iteration-count:infinite;
}
@keyframes move{
    from{left:0px;}
    to{left:500px;}
}
@keyframes reSize{
    from{width:50px;height:50px;}
    to{width:100px;height:100px;}
}
@keyframes bgColor{
    from{background-color:green;}
    to{background-color:blue;}
}

Xem ví dụ

– Lưu ý: Đối với những thuộc tính animation khác cũng tương tự như vậy, nếu các bạn muốn thiết lập nhiều giá trị để đáp ứng cho riêng từng cái @keyframes thì các bạn cần phải gán cho nó nhiều giá trị kèm theo một dấu phẩy nằm giữa mỗi hai giá trị.

Ví dụ:

animation-name: move, reSize, bgColor;
animation-duration: 3s;
animation-iteration-count: infinite, 2, infinite;

Xem ví dụ

– Thuộc tính animation-name dùng để xác định tên của cái @keyframes mà chúng ta muốn áp dụng lên phần tử để tạo hiệu ứng chuyển động.

– Cú pháp:

animation-name: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

name	– Chỉ định cụ thể tên của cái @keyframes mà chúng ta muốn áp dụng lên phần tử.
none	– Không thiết lập hiệu ứng chuyển động cho phần tử.
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính animation-name có giá trị là none)
inherit	– Kế thừa giá trị thuộc tính animation-name từ phần tử cha của nó.

– Thuộc tính animation-iteration-count dùng để thiết lập “số lần lặp lại” một chu kỳ hiệu ứng chuyển động.

“Số lần lặp lại” là bao gồm luôn cả lần thực thi đầu tiên.

– Cú pháp:

animation-iteration-count: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

number	– Chỉ định cụ thể số lần lặp lại một chu kỳ hiệu ứng chuyển động.	Xem ví dụ
infinite	– Không giới hạn số lần lặp lại (lặp lại mãi mãi)
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính animation-iteration-count có giá trị là 1)
inherit	– Kế thừa giá trị thuộc tính animation-iteration-count từ phần tử cha của nó.

– Thuộc tính animation-direction dùng để điều hướng hiệu ứng chuyển động.

– Cú pháp:

animation-direction: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

normal	– Hiệu ứng chuyển động diễn ra theo chiều xuôi.	Xem ví dụ
reverse	– Hiệu ứng chuyển động diễn ra theo chiều ngược.
alternate	– Hiệu ứng chuyển động động diễn ra theo chiều xuôi trước, sau đó diễn ra theo chiều ngược.
alternate-reverse	– Hiệu ứng chuyển động động diễn ra theo chiều ngược trước, sau đó diễn ra theo chiều xuôi.
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính animation-direction có giá trị là normal)
inherit	– Kế thừa giá trị thuộc tính animation-direction từ phần tử cha của nó.

– Thuộc tính animation-fill-mode dùng để chỉ định bộ định dạng (style) mà phần tử sẽ được áp dụng ở thời điểm trước khi hiệu ứng chuyển động diễn ra & sau khi hiệu ứng chuyển động kết thúc.

– Cú pháp:

animation-fill-mode: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

none	– Trước khi hiệu ứng chuyển động được diễn ra & sau khi hiệu ứng chuyển động kết thúc, phần tử sẽ sử dụng style mặc định của nó.	Xem ví dụ
forwards	– Trước khi hiệu ứng chuyển động diễn ra thì phần tử sẽ sử dụng style mặc định của nó. – Sau khi hiệu ứng chuyển động kết thúc thì phần tử sẽ sử dụng style của trạng thái cuối cùng.
backwards	– Trước khi hiệu ứng chuyển động diễn ra thì phần tử sẽ sử dụng style của trạng thái đầu tiên. – Sau khi hiệu ứng chuyển động kết thúc thì phần tử sẽ sử dụng style mặc định của nó.
both	– Trước khi hiệu ứng chuyển động diễn ra thì phần tử sẽ sử dụng style của trạng thái đầu tiên. – Sau khi hiệu ứng chuyển động kết thúc thì phần tử sẽ sử dụng style của trạng thái cuối cùng.
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính animation-fill-mode có giá trị là none)
inherit	– Kế thừa giá trị thuộc tính animation-fill-mode từ phần tử cha của nó.

– Lưu ý: Trạng thái “đầu tiên” & “cuối cùng” còn phụ thuộc vào hai thuộc tính animation-direction & animation-iteration-count.

– Thuộc tính animation-play-state dùng để tùy chỉnh việc tiếp tục hay tạm ngưng hiệu ứng chuyển động.

– Cú pháp:

animation-play-state: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

running	– Hiệu ứng chuyển động tiếp tục được diễn ra.	Xem ví dụ
paused	– Tạm ngưng hiệu ứng chuyển động.
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính animation-play-state có giá trị là running)
inherit	– Kế thừa giá trị thuộc tính animation-play-state từ phần tử cha của nó.

– Thông thường, tại một cặp thời điểm liền kề, khi hiệu ứng chuyển động diễn ra thì mặc định hiệu ứng sẽ chuyển động khá chậm ở giai đoạn đầu, nhanh dần ở giai đoạn giữa, chậm lại ở giai đoạn cuối.

– Tuy nhiên, với việc sử dụng thuộc tính animation-timing-function thì chúng ta có thể thiết lập lại tốc độ chuyển động của hiệu ứng ở từng giai đoạn.

– Cú pháp:

animation-timing-function: value;

– Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

linear	– Cùng một tốc độ từ đầu đến cuối.	Xem ví dụ
ease	– Khá chậm ở giai đoạn đầu, nhanh dần ở giai đoạn giữa, chậm lại ở giai đoạn cuối.
ease-in	– Chậm ở giai đoạn đầu, nhanh ở giai đoạn sau.
ease-out	– Nhanh ở giai đoạn đầu, chậm ở giai đoạn sau.
ease-in-out	– Chậm ở giai đoạn đầu & giai đoạn cuối, nhanh ở giai đoạn giữa.
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính animation-timing-function có giá trị là ease)
inherit	– Kế thừa giá trị thuộc tính animation-timing-function từ phần tử cha của nó.

– Thuộc tính animation là cú pháp tổng quát dùng để thiết lập hiệu ứng chuyển động cho phần tử.

(thay vì phải sử dụng kết hợp nhiều thuộc tính animation riêng lẻ thì bây giờ chúng ta chỉ cần dùng mỗi thuộc tính này là đủ)

– Cú pháp:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

– Trong đó, tám giá trị name duration timing-function delay iteration-count direction fill-mode play-state lần lượt là giá trị của tám thuộc tính:

animation-name
animation-duration
animation-iteration-count
animation-delay
animation-direction
animation-fill-mode
animation-play-state
animation-timing-function

– Tuy nhiên, thuộc tính animation không bắt buộc chúng ta phải gán cho nó đủ tám giá trị, những giá trị của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính đó.

Ví dụ:

#test{
    background-color:green;
    width:100px;
    height:100px;
    position:relative;
    animation:move 3s infinite;
}
@keyframes move{
    from{left:0px;}
    to{left:500px;}
}

Cách tạo hiệu ứng chuyển động cho phần tử HTML

1) Cách tạo một cái @keyframes

2) Danh sách các thuộc tính animation

3) Cách áp dụng nhiều @keyframes lên một phần tử

Chuyên mục

Recent News