CSS Hiệu ứng nâng cao

1. Transition

• Ý nghĩa: Tạo hiệu ứng chuyển đổi mượt mà khi giá trị thuộc tính CSS thay đổi (ví dụ: màu sắc, kích thước).

• Cú pháp:

  selector {
    transition: property duration timing-function delay;
  }
  

  • property: thuộc tính cần hiệu ứng (ví dụ: color, width).

  • duration: thời gian chuyển đổi (ví dụ: 0.5s).

  • timing-function: tốc độ chuyển đổi (ease, linear, ease-in, ease-out).

  • delay: độ trễ trước khi bắt đầu.

• Ví dụ: Nút đổi màu khi rê chuột

  <style>
    button {
      background-color: blue;
      color: white;
      transition: background-color 0.5s ease;
    }
    button:hover {
      background-color: red;
    }
  </style>
  <button>Di chuột vào tôi</button>
  

  👉 Khi rê chuột, màu nền chuyển từ xanh sang đỏ mượt mà.

2. Animation

• Ý nghĩa: Tạo hiệu ứng động phức tạp bằng cách định nghĩa nhiều trạng thái với @keyframes.

• Cú pháp:

  @keyframes animationName {
    from { property: value; }
    to { property: value; }
  }
  selector {
    animation: animationName duration timing-function delay iteration-count direction;
  }
  

  • iteration-count: số lần lặp (infinite để lặp vô hạn).

  • direction: hướng chạy (normal, reverse, alternate).

• Ví dụ: Hộp nhảy lên xuống

  <style>
    @keyframes bounce {
      0%   { transform: translateY(0); }
      50%  { transform: translateY(-50px); }
      100% { transform: translateY(0); }
    }
    div {
      width: 100px; height: 100px;
      background: orange;
      animation: bounce 1s infinite;
    }
  </style>
  <div></div>
  

  👉 Hộp màu cam sẽ nhảy lên xuống liên tục.

3. Transform

• Ý nghĩa: Thay đổi hình dạng, vị trí, kích thước phần tử mà không ảnh hưởng đến bố cục xung quanh.

• Các giá trị phổ biến:

  • translate(x,y): di chuyển.

  • rotate(deg): xoay.

  • scale(x,y): phóng to/thu nhỏ.

  • skew(x,y): nghiêng.

• Ví dụ: Xoay hình vuông khi rê chuột

  <style>
    div {
      width: 100px; height: 100px;
      background: green;
      transition: transform 0.5s;
    }
    div:hover {
      transform: rotate(45deg) scale(1.2);
    }
  </style>
  <div></div>
  

  👉 Khi rê chuột, hình vuông xoay 45° và phóng to 20%.