CSS3

⌘K
  2. Home
  4. Docs
  6. CSS3
  8. Bài 2: Hiệu ứng trong CSS3

Bài 2: Hiệu ứng trong CSS3

1. Hiệu ứng trong CSS3 như thế nào?

Hiệu ứng trong CSS nghĩa là cách một đối tượng chuyển từ trạng thái này sao trạng thái khác trong một khoảng thời gian nhất định. Xem ví dụ sau

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Animation</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                border-radius: 50%;
                animation: toReg 3s 0.5s ease-in-out infinite;
            }
 
            @keyframes toReg {
                to {
                border-radius: 0%;
                background-color: aquamarine;
            }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Trong ví dụ này mình đã tạo ra hiệu ứng chuyển động từ hình tròn sang hình vuông và có thay đổi background.

Trước tiên cần khai báo một trạng thái cần di chuyển bằng từ khóa @keyframes như sau:

@keyframes toReg {
  to {
    border-radius: 0%;
    background-color: aquamarine;
  }
}

Tạo thẻ div với hiệu ứng như sau:

div {
   animation: toReg 3s 0.5s ease-in-out infinite;
}

Giải thích:

  • toReg có ở @keyframes, tạo hiệu ứng cho thẻ nào, ta đặt tên đó.
  • 3s là thời gian diễn ra hiệu ứng
  • 0.5s thời gian chờ để diễn ra hiệu ứng
  • ease-in-out là loại hiệu ứng
  • infinite là số lần diễn ra hiệu ứng, infinite ở đây là vô tận.

2. Các loại hiệu ứng trong CSS3

animation-name: Chỉ định tên của hiệu ứng, phần mà được định nghĩa trong quy tắc keyframe.

animation-duration: Chỉ định thời gian từ lúc hiệu ứng bắt đầu cho đên khi kết thúc.

animation-delay: Chỉ định thời gian chờ trước khi hiệu ứng bắt đầu thực thi.

animation-iteration-count: Chỉ định số lần hiệu ứng lập lại. Xem ví dụ bên dưới

div {
  animation-iteration-count: 2;
}

animation-direction: Định dạng hướng di chuyển của đối tượng.

Có bốn giá trị:

  1. normal: di chuyên về phía trước.
  2. reverse: di chuyển theo hướng về phía sau.
  3. alternate: di chuyển về phía trước rồi di chuyển về phía sau.
  4. alternate-reverse: di chuyển về phía sau rồi di chuyển về phía trước.

animation-timing-function:Định dạng cách thay đổi trạng thái của đối tượng.

Có các giá trị sau:

  1. linear: giữ tốc độ như nhau từ lúc bắt đầu cho đến khi kết thúc.
  2. ease: bắt đầu chậm sau đó nhanh và kết thúc chậm dần.
  3. ease-in: bắt đầu chậm.
  4. ease-out: kết thúc chậm.
  5. ease-in-out: bắt đầu chậm và kết thúc chậm.

animation-fill-mode: Định dạng trạng thái của đối tượng.

Có các giá trị sau:

  1. forwards: trạng thái của đối tượng sẽ đẽ thể hiện như cấu hình cuối cùng trong quy tắc keyframe.
  2. backwards: trạng thái của đối tượng sẽ đẽ thể hiện như cấu hình đầu tiên trong quy tắc keyframe (lưu ý chỉ trong thời gian diễn ra hiệu ứng).
  3. both: sự hòa trộn giữa forwards và backwards.