Cách sử dụng thuộc tính @keyframes trong CSS để tạo hiệu ứng chuyển động cho phần tử HTML

Thuộc tính @keyframes trong CSS dùng để tạo ra một hiệu ứng chuyển động.

Sau đó, một phần tử có thể gọi đến tên của hiệu ứng chuyển động để nó được chuyển động.

Giải thích thêm: Hiệu ứng chuyển động là một tập hợp các quy tắc chỉ định trong một khoảng thời gian nào đó thì sẽ có hành động gì diễn ra (hành động đó là một tập hợp các các cặp thuộc tính : giá trị thuộc tính để thay đổi vị trí, kích thước, màu sắc,…. của phần tử)

Ví dụ:

Đoạn mã dưới đây tạo một hiệu ứng chuyển động có tên là “dịch chuyển” với chức năng phần tử sẽ được chuyển sang phải 600px

@keyframes dich_chuyen {
    0%   {left:0px;}
    100%  {left:600px;}
}

Sau đó phần tử div sẽ dùng thuộc tính animation gọi đến tên của hiệu ứng chuyển động để nó được chuyển động

div{
    width:100px;
    height:100px;
    background-color:black;
    position:relative;
    animation:dich_chuyen 5s infinite;
}

Cách sử dụng thuộc tính @keyframes

Cú pháp:

@keyframes animationname {
    keyframes-selector {css-styles;}
}

Giải thích ý nghĩa các tham số trong thuộc tính @keyframes:

Tham số
Mô tả

animationname

Tên của hiệu ứng chuyển động

keyframes-selector

Tỷ lệ phần trăm của thời gian hiệu ứng chuyển động.
Dưới đây là các giá trị được phép sử dụng:

• 0% – 100%
• from (Tương tự như 0%)
• to (Tương tự như 100%)

Lưu ý: Bạn có thể sử dụng nhiều keyframes-selector trong một hiệu ứng chuyển động

css-styles

Cặp thuộc tính : giá trị thuộc tính
Lưu ý: Bạn có thể sử dụng nhiều css-styles trong một keyframes-selector

Một số ví dụ về cách sử dụng thuộc tính @keyframes

Ví dụ 1:

Tạo hiệu ứng chuyển động “Xuống => Lên => Xuống”

@keyframes dich_chuyen {
    0%   {top:0px;}
    50%  {top:200px;}
    70%  {top:100px;}
    100% {top:300px;}
}

Xem ví dụ

Ví dụ 2:

Tạo hiệu ứng chuyển động “Theo hình chữ nhật”

@keyframes dich_chuyen {
    0%   {top:0px;left:0px;}
    50%  {top:0px;left:400px;}
    70%  {top:200px;left:400px;}
    90%  {top:200px;left:0px;}
    100% {top:0px;left:0px;}
}

Xem ví dụ

Ví dụ 3:

Tạo hiệu ứng chuyển động “Theo hình chữ nhật + đổi màu + thay đổi kích thước phần tử”

@keyframes dich_chuyen {
    0%   {top:0px;left:0px;background-color:red;}
    50%  {top:0px;left:400px;background-color:green;width:150px;height:150px;}
    70%  {top:200px;left:400px;background-color:blue;width:50px;height:50px;}
    90%  {top:200px;left:0px;background-color:yellow;width:150px;height:150px;}
    100% {top:0px;left:0px;background-color:red;width:50px;height:50px;}
}

Xem ví dụ