Hướng dẫn keyframes trong css

  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • Thuộc tính @keyframes

Định nghĩa và sử dụng

Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.

Cấu trúc

@keyframes tênAnimation {
    giá trị { css }
}

@-moz-keyframes tênAnimation {
    giá trị { css }
}

@-webkit-keyframes tênAnimation {
    giá trị { css }
}

Trong đó:

  • @-moz-keyframes hỗ trợ cho firefox.
  • @-webkit-keyframes hỗ trợ cho Google Chrome và Safari.

@keyframes có các giá trị như sau:

Thuộc tínhgiá trịVí dụMô tả
@keyframes Tên animation @keyframes aniName{} Xác định tên cho @keyframes.
from {thuộc tính: giá trị;}
to {thuộc tính: giá trị;}
from {top: 0;}
to {bottom: 100px; color: red;}
Định dạng thành phần theo trí đầu và vị trí cuối.
Phần trăm {thuộc tính: giá trị;} 0% {top: 0;}
50% {top: 150px;}
100% {top: 50px;}
Định dạng thành phần theo phần trăm thời gian hành động diễn ra.

HTML viết:




HỌC WEB CHUẨN

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p {
    position: relative;
    width: 130px;
    animation: aniName 10s infinite;
    -moz-animation: aniName 10s infinite;
    -webkit-animation: aniName 10s infinite;
    -o-animation: aniName 10s infinite;
}

@keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-moz-keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-webkit-keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-o-keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

Hiển thị trình duyệt khi có CSS:

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS3
  • Animation và @keyframes

Animation và @keyframes

Animation@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@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@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ịVDMô 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:





Animation

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:

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:

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





Animation

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

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.