Khóa học IT CSS Cơ bản 027_Hoạt ảnh và Chuyển tiếp

Hoạt ảnh

Hoạt ảnh CSS là một hiệu ứng có thể được sử dụng để thay đổi dần các giá trị thuộc tính của phần tử. Hoạt ảnh có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm chiều rộng, chiều cao, màu sắc, nền, viền, v.v.

Cú pháp của thuộc tính animation như sau:

• name: Chỉ định tên của hoạt ảnh.
• duration: Chỉ định thời lượng của hoạt ảnh.
• timing-function: Chỉ định đường cong tốc độ của hoạt ảnh.
• delay: Chỉ định độ trễ của hoạt ảnh.
• iteration-count: Chỉ định số lần hoạt ảnh phát.
• direction: Chỉ định hướng phát của hoạt ảnh.
• fill-mode: Chỉ định kiểu dáng của phần tử sau khi hoạt ảnh hoàn thành hoặc khi hoạt ảnh bị tạm dừng hoặc dừng.

Ví dụ:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* Áp dụng hoạt ảnh, kéo dài 2 giây, lặp vô hạn, chuyển tiếp tuyến tính */
14
  }

1
    <div class="example1"></div>

Hiệu ứng:

• @keyframes rotate định nghĩa một hoạt ảnh keyframe có tên rotate, từ trạng thái ban đầu (xoay 0 độ) đến trạng thái kết thúc (xoay 360 độ).
• Phần tử .animated-box áp dụng hoạt ảnh này, chỉ định tên hoạt ảnh, thời lượng, phương thức lặp, v.v. thông qua thuộc tính animation.

Hoạt ảnh CSS và chuyển tiếp CSS đều là các hiệu ứng có thể được sử dụng để thay đổi dần các giá trị thuộc tính của phần tử. Sự khác biệt chính giữa chúng là:

• Hoạt ảnh có thể phát lặp lại, trong khi chuyển tiếp chỉ có thể phát một lần.
• Hoạt ảnh có thể chỉ định hướng phát, trong khi chuyển tiếp không thể.
• Hoạt ảnh có thể chỉ định kiểu dáng của phần tử sau khi hoạt ảnh hoàn thành hoặc khi hoạt ảnh bị tạm dừng hoặc dừng, trong khi chuyển tiếp không thể.

Chuyển tiếp

Chuyển tiếp CSS là các hiệu ứng có thể được sử dụng để thay đổi dần các giá trị thuộc tính của phần tử. Chuyển tiếp có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm chiều rộng, chiều cao, màu sắc, nền, viền, v.v. Hiệu ứng của chuyển tiếp có thể khác nhau tùy thuộc vào trình duyệt và thiết bị, và hiệu suất của chuyển tiếp có thể khác nhau tùy thuộc vào độ phức tạp của chuyển tiếp.

Ví dụ:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* Định nghĩa thuộc tính và thời gian chuyển tiếp */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

Hiệu ứng: