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.
Chia sẻ bài viết

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

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon