Code

Kết Quả

Phân tích hiệu ứng chuyển động

- Trước khi tạo một cái @keyframes thì chúng ta cần phải hình thành ý tưởng, phân tích sơ qua coi cái "hiệu ứng chuyển động" mà mình muốn thiết lập cho phần tử sẽ diễn ra trông như thế nào.

- Ví dụ: Hình ảnh phía trên chính là sơ đồ minh họa về hiệu ứng chuyển động mà tôi muốn thiết lập cho phần tử.

• Tôi muốn ban đầu (trạng thái 1) phần tử sẽ có màu xanh dương, nằm ở vị trí top 0px, left 0px.
• Sau đó phần tử đổi thành màu đỏ, di chuyển dần dần sang bên phải đến vị trí top 0px, left 400px (trạng thái 2)

=> Từ (trạng thái 1) sang (trạng thái 2) sẽ chiếm 10% thời lượng của hiệu ứng chuyển động.

• Tiếp theo phần tử sẽ đổi thành màu xanh lá cây, di chuyển dần dần xuống phía dưới đến vị trí top 200px, left 400px (trạng thái 3)

=> Từ (trạng thái 2) sang (trạng thái 3) sẽ chiếm 30% thời lượng của hiệu ứng chuyển động.

• Cuối cùng phần tử đổi lại màu xanh dương, trở về (trạng thái 1) nằm ở vị trí top 0px, left 0px.

=> Từ (trạng thái 3) trở về (trạng thái 1) sẽ chiếm 60% thời lượng của hiệu ứng chuyển động.

- Sau khi đã phân tích sơ qua "hiệu ứng chuyển động" thì công việc tiếp theo đó chính là dựa vào những gì đã phân tích được để viết ra một cái @keyframes.

- Trước tiên tôi tạo một cái @keyframes có tên là move.

@keyframes move{

}

- Dựa vào những gì đã phân tích thì tôi xác định được 4 thời điểm:

✅ Thời điểm 0%, lúc này hiệu ứng chuyển động chưa diễn ra, phần tử ở trạng thái mặc định (trạng thái 1) có nền màu xanh dương, top 0px, left 0px.

@keyframes move{
    0%{
        top:0px;
        left:0px;
        background-color:blue;
    }
}

✅ Thời điểm 10%, đây là khi phần tử đã chuyển sang (trạng thái 2), lúc này phần tử có nền màu đỏ, top 0px, left 400px.

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

✅ Thời điểm 40%, đây là khi phần tử đã chuyển sang (trạng thái 3), lúc này phần tử có nền màu xanh lá cây, top 200px, left 400px.

❓❓❓ Lý do mà tôi xác định được 40% là bởi vì trước đó phần tử đang ở thời điểm 10%, từ (trạng thái 2) sang (trạng thái 3) lại chiếm thêm 30% thời lượng của hiệu ứng chuyển động.

@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;
    }
}

✅ Thời điểm 100%, đây là khi phần tử quay trở về (trạng thái 1), có nền màu xanh dương, top 0px, left 0px.

❓❓❓ Lý do mà tôi xác định được 100% là bởi vì trước đó phần tử đang ở thời điểm 40%, từ (trạng thái 3) quay trở về (trạng thái 1) lại chiếm thêm 60% thời lượng của hiệu ứng chuyển động.

@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;
    }
}