Animation và @keyframes | Hướng dẫn học | Học web chuẩn

Posted on by mtoplistChuyên mục:Top List

Animation và @keyframes

Animation và @keyframes là một bộ thuộc tính đi chung với nhau dùng để tạo hiệu ứng chuyển động, 2 thuộc tính này được kỳ vọng giảm tải lượng lớn source code Javascript.

Phần lớn trang web gần đây sử dụng animation và @keyframes khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.

Cấu trúc

Cần phải có đầy đủ cả 2 thuộc tính animation và @keyframes.

Cấu trúc animation cơ bản

tag {
    
animation: [
animation-name
] [duration];
}


@keyframes 
animation-name
 {

}

Cấu trúc animation tổng quát

tag {
    
animation: [
animation-name
] [duration] [timing] [delay] [interaction-count] [direction];
}


@keyframes 
animation-name
 {

}

@keyframes có 2 cấu trúc như sau (tùy vào mục đích sử dụng):

@keyframes animation-name {
    
from { }
    to { }

}
@keyframes animation-name {
    
0% { }
    10% { }
    40% { }
    ...
    100% { }

}

Các giá trị của animation:

Giá trị
Đơn vị
VD
Mô tả

animation-name
Tên bất kỳ, không khoảng cách.
boxAnimation
Xác định tên cho một animation, bắt buộc trùng với tên khai báo tại @keyframes.

duration
Thời gian
5s
Thời gian để hoàn thành một chuyển động, mặc định là 0s.

timing
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(n,n,n,n)
ease
Xác định loại hiệu ứng chuyển động.

delay
Thời gian
2s
Cho biết sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0.

interaction-count
Số tự nhiên
infinite

Số lần thực hiện chuyển động, mặc định 1 lần.
Giá trị infinite là lập vô hạn.

direction
normal
alternate
alternate
Cho biết chuyển động có đảo ngược ở chu kỳ tiếp theo hay không, mặc định là normal.

Cách sử dụng

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Animation</p>
</div>
</body>
</html>

CSS viết – khi chưa sử dụng animation:

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
}

Hiển thị trình duyệt:

Animation

Tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về animation:

CSS viết:

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
    
animation: 
moveRight
 5s infinite;
}

@keyframes 
moveRight
 {
    from { width: 100px; }
    to { width: 300px; }
}

Hiển thị trình duyệt:

Animation

Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:

  • [animation-name]

    : tên này cần phải trùng với @keyframes.

  • [duration]

    : một chu kỳ chuyển động trong 5s.

  • [interaction-count]

    : cho chuyển động lặp vô hạn.

Ví dụ thêm về animation và @keyframes

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Animation</p>
</div>
</body>
</html>

Animation lặp lại và đổi chiều

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
    
animation: moveRight 5s infinite alternate;

}

@keyframes moveRight {
    from { width: 100px; }
    to { width: 300px; }
}

Animation

Animation theo vị trí

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
    
position: relative;

    animation: moveRight 5s infinite alternate;
}

@keyframes moveRight {
    from { 
left: 0;
 }
    to { 
left: 100px;
 }
}

Animation

Animation với transform

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
    position: relative;
    animation: moveRight 5s infinite alternate;
}

@keyframes moveRight {
    from {
        left: 0;
        
transform: rotate(0deg);

    }
    to {
        left: 200px;
        
transform: rotate(360deg);

    }
}

Animation

Animation kết hợp nhiều giá trị

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
    position: relative;
    animation: moveRight 5s infinite alternate;
}

@keyframes moveRight {
    
from {
        background-color: #73BEFF;
        height: 30px;
        line-height: 30px;
        left: 0;
    }
    to {
        background-color: #FFFF00;
        height: 100px;
        line-height: 100px;
        left: 200px;
    }

}

Animation

Animation và @keyframes theo phần trăm

p {
    background-color: #476CFF;
    text-align: center;
    width: 100px;
    position: relative;
    animation: moveRight 5s infinite alternate;
}

@keyframes moveRight {
    
0%
 {
        background-color: #73BEFF;
        left: 0;
        top: 0;
    }
    
30%
 {
        background-color: #FFFF00;
        left: 150px;
        top: 40px;
        transform: rotate(0deg);
    }
    
60%
 {
        background-color: #FF0000;
        left: 300px;
        top: 0;
        transform: rotate(-180deg);
    }
    
100%
 {
        background-color: #BC70FF;
        left: 400px;
        top: 60px;
        transform: rotate(180deg);
    }
}

Animation

Ngoài các ví dụ trên, animation còn có nhiều thuộc tính riêng cho từng giá trị, các bạn có thể xem thêm tại tham khảo animation.

mtoplist