Thuộc tính animation hiệu ứng động với quy tắc keyframes trong CSS

• Hiệu ứng động và keyframes
• Thuộc tính animation-direction
• Thuộc tính animation-timing-function
• Thuộc tính animation-play-state
• Thuộc tính animation

Hiệu ứng động với các thuộc tính animation-* và quy tắc @keyframes

Trong phần thuộc tính transition bạn có thể tạo ra hiệu ứng động - biến đổi box phần tử một cách mềm mại khi các thuộc tính thay đổi từ giá trị này sang giá trị khác. Hiệu ứng động chỉ xảy ra khi có sự thay đổi giá trị các thuộc tính (như width, color, left, right ...)

Trong phần này, bạn có thể tạo ra hiệu ứng động của phần tử mà không cần kích hoạt bằng cách có sự thay đổi của giá trị của thuộc tính, mà hiệu ứng có thể diễn ra ngay, có thể diễn ra một lần hay lặp lại nhiều lần ...

Quy tắc @keyframes và thuộc tính animation-name, animation-duration, animation-iteration-count

Hiệu ứng động đó là sự biến đội của các thuộc tính (width, height, left, right, color, font-size ...) ở trạng thái đầu tiên tới trạng thái cuối, từ trạng thái đầu tới cuối tạo ra một chu trình. Quy tắc @keyframes là định nghĩa chu trình hiệu ứng động.

Để khai báo tạo ra một @keyframes, ví dụ tạo ra @keyframes có tên hieu-ung-abc viết cú pháp như sau:

@keyframes hieu-ung-abc {
    /* viết các khối chứa giá trị thuộc tính css */
}

Sau khi có @keyframes hieu-ung-abc để áp dụng vào phần tử ta dùng thuộc tính css animation-name, đồng thời thiết lập về thời gian diễn ra một chu trình với thuộc tính animation-duration và thiết lập lặp lại với animation-iteration-count, cú pháp của chúng như sau:

animation-duration: time;                     /* thời gian như 1s, 2s ... */
animation-iteration-count: infinite | number; /* number = số lần lặp, infinite = vô tận */
animation-name: none | keyframe-name;

Ví dụ:

.my-element {
    animation-name: hieu-ung-abc;   /* thiết lập quy tắc hiệu ứng động cho phần tử */
    animation-duration: 3s;         /* thời gian diễn ra 1 chu trính hiệu ứng */
    animation-iteration-count: 1;   /* số lần (số chu trình diễn ra) */
}

Bây giờ tìm hiểu kỹ về cú pháp viết @keyframe.

Trong @keyframe có nhiều khối, mỗi khối cho biết giá trị thuộc tính của phần tử ở thời điểm đó. Khối ở thời điểm đầu là from hoặc 0%, khối ở thời điểm cuối là to hoặc 100%, xem ví dụ đơn giản sau - tạo ra một chu trình cỡ font chữ biến đổi từ 10px đến 30px, màu chữ bến đổi từ màu red sang màu green. Tạo ra @keyframe đó đặt tên là kf1 như sau:

<style>
    @keyframes kf1 {
        from {  /* thời điểm ban đầu của chu trình */
            font-size: 10px;
            color: red;
        }
        to {  /* thời điểm cuối của chu trình */
            font-size: 30px;
            color: green;
        }
    }
    
    .ele {
        padding: 5px;
        border: 1px solid red;
    }
    
    .exam1 {
        animation-name: kf1;                 /* thiết lập keyframe */
        animation-duration: 3s;              /* một chu trình điễn ra 3s */
        animation-iteration-count: infinite; /* lặp lại chu trình vô số lần */
        height: 100px;
    }
</style>

<div class="ele exam1">HIỆU ỨNG ĐỘNG KF1</div>

Sử dụng ký hiệu n% tạo ra khối quy tắc trong chu trình

Bạn có thể thay ký hiệu from bằng %0 và to bằng 100%, với cách này bạn có thể tạo ra các khối ở thời điểm bất kỳ của chu trình bằng ký hiệu n%

Ví dụ:

<style>
    @keyframes kf2 {
        0% {  
            /* thời điểm ban đầu của chu trình */
            font-size: 10px;
            color: red;
        }
        
        50% {  
            /* thời điểm giữa chu trình */
            font-size: 30px;
            color: green;
        }
        
        to {        
            /* thời điểm cuối của chu trình, có thêm hiệu ứng thay đổi độ dày viền */
            font-size: 40px;   
            border-width: 10px;
        }
    }
     
    
    .exam2 {
        animation-name: kf2;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        height: 100px;
    }
</style>

<div class="ele exam2">HIỆU ỨNG ĐỘNG KF2</div>

Thuộc tính animation-direction

Thuộc tính animation-direction chỉ định một hiệu ứng động diễn ra thuận hay ngược chu trình

Cú pháp

animation-direction: normal | reverse | alternate | alternate-reverse

• normal: chạy từ đầu tới cuối chu trình, đến cuối nếu lặp lại nó sẽ nhảy về đầu chu trình và tiếp tục thực hiện
• reverse: chu trình biến đối bị ngược, từ to về from.
• alternate: chạy từ đầu đến cuối - nếu lặp lại thì sẽ không nhảy về đầu mà thực hiện từ cuối về đầu.
• alternate-reverse: Chạy từ cuối về đầu, nếu lặp lại thì thực hiện từ đầu về cuối ...

Ví dụ:

<style> 
    .direct-normal {
        animation-direction: normal;
    } 
    .direct-alternate {
        animation-direction: alternate;
        animation-fill-mode: both;

    } 

</style>

<div class="ele exam1 direct-normal">direct-normal</div>
<div class="ele exam1 direct-alternate">direct-alternate</div>

Thuộc tính animation-timing-function

Thuộc tính animation-timing-function để thiết lập hàm thời gian, xác định tốc độ biến đổi trong một chu trình

animation-timing-function: timing-function;

Trong đó có một số hàm thời gian timing-function như:

• ease: tốc độ biến đối tương ứng hàm cubic-bezier(0.25, 0.1, 0.25, 1) (xem Đường cubic-bezier)
• linear: tốc độ biến đối đều, tương đương cubic-bezier(0, 0, 1, 1)
• ease-in: tương đương cubic-bezier(0.42, 0, 1, 1), ban đầu chậm sau nhanh lên, sau khi nhanh giữ nguyên đến cuối
• ease-out: tương đương cubic-bezier(0, 0, 0.58, 1), ban đầu nhanh sau chậm, sau khi chậm giữ nguyên đến cuối
• ease-in-out: tương đương cubic-bezier(0.42, 0, 0.58, 1), ban đầu chậm, nhanh ở giữa, sau đó chậm cho đến cuối
• cubic-bezier tự thiết lập hàm cubic-bezier(x1,y1, x2, y2) (xem Đường cubic-bezier)

<style> 
    .timing1 {
        animation-timing-function: cubic-bezier(0.04 , 0.87 , 0.04 , 0.24);
    } 

</style>

<div class="ele exam1 timing1">cubic-bezier(0.04 , 0.87 , 0.04 , 0.24)</div>

Thuộc tính animation-play-state

Thuộc tính animation-play-state để thiết lập hiệu động đang chạy hay bị tạm dừng. Thường dùng JS để thiết lập, cú pháp:

animation-play-state: running | paused

Thuộc tính animation

Thuộc tính animation là cách viết ngắn gọn gộp các thuộc tính animation-* (animation-name , animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction ...) thành một dòng:

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

<style>
    /*
        .exam3 {
            animation-name: kf2;
            animation-duration:  2s;
            animation-timing-function: ease-in;
            animation-iteration-count:infinite;
            animation-direction: alternate;
        } 
    */ 
    .exam3 {
        animation: kf2 2s ease-in infinite alternate;
        height: 80px;
    } 
    

</style>

<div class="ele exam3">Hiệu ứng động</div>

<style>
    @keyframes kf3 {
        0% {
            left: 0px;
            top:0%;
            border-radius: 0%;
            width: 300px;
            height: 10px;
            background-color: red;
        }
        50% {
            left: 50%;
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
        100% {
            left: 100%;
            border-radius: 0%;
            width: 300px;
            height: 10px;
            background-color: green;
        }
    }
    .ele-container {
        width: 100%;
        height: 150px;
        position: relative;
    }
    
    .ele2 {
        position: absolute;
        height: 10px;
        width: 10px;
        background: green;
    }
     
    .exam4 {
        animation: kf3 5s linear infinite alternate;
    }  

</style>

<div class="ele-container">
    <div class="ele2 exam4"></div>
</div>