CSS hoạt hình chuyển tiếp

Nếu bạn đang làm việc với các công nghệ web như CSS, HTML và JavaScript, điều quan trọng là bạn phải có một số kiến ​​thức cơ bản về hoạt ảnh và chuyển tiếp CSS

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một số hoạt ảnh chuyển tiếp cơ bản bằng CSS

Cách tạo hiệu ứng động cho một phần tử với chuyển đổi cơ bản khi di chuột

Trong ví dụ này, chúng tôi sẽ làm cho độ mờ của một phần tử thay đổi khi người dùng di chuột qua phần tử đó

Đây là một quá trình chuyển đổi đơn giản có thể được kích hoạt khi chúng ta di chuột qua phần tử. Chúng tôi có thể thêm nhiều chuyển đổi sẽ chạy cùng một lúc

Hãy thêm thuộc tính chuyển đổi tỷ lệ để thêm chuyển đổi tỷ lệ cho phần tử

 .elem:hover {
      transform: scale(1.1);
    }

Nhưng quá trình chuyển đổi có vẻ không suôn sẻ vì chúng tôi không xác định thời lượng của quá trình chuyển đổi hoặc sử dụng bất kỳ chức năng thời gian nào.

Nếu chúng ta thêm thuộc tính

 .elem:hover {
      transform: scale(1.1);
    }

5, nó sẽ làm cho phần tử di chuyển trơn tru hơn

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

Hãy phân tích cách thức hoạt động của thuộc tính chuyển tiếp.

  transition: 500ms linear;

•  .elem:hover {
        transform: scale(1.1);
      }

  6. thời lượng của quá trình chuyển đổi tính bằng mili giây

•  .elem:hover {
        transform: scale(1.1);
      }

  7. chức năng thời gian

div {
    transition:    ;
}

Chúng tôi có thể thêm nhiều tùy chọn hơn như bên dưới (ví dụ từ MDN)

________số 8_______

Vậy mã này đang làm gì?

• chuyển đổi tài sản. thuộc tính bạn muốn tạo hiệu ứng động. Nó có thể là bất kỳ phần tử CSS nào như

   .elem:hover {
        transform: scale(1.1);
      }

  8,

   .elem:hover {
        transform: scale(1.1);
      }

  9,

   .elem {
        background: blueviolet;
        width: 300px;
        height: 150px;
        margin: 20px auto;
        transition: 500ms linear; 
      }

  0,

   .elem {
        background: blueviolet;
        width: 300px;
        height: 150px;
        margin: 20px auto;
        transition: 500ms linear; 
      }

  1, v.v.
• thời gian chuyển đổi. thời gian của quá trình chuyển đổi
• độ trễ chuyển đổi. độ trễ trước khi quá trình chuyển đổi bắt đầu

Bạn có thể tìm hiểu thêm về các cách sử dụng khác nhau của

 .elem:hover {
      transform: scale(1.1);
    }

5 trong CSS tại đây

Cách làm cho quá trình chuyển đổi tương tác hơn bằng cách sử dụng thuộc tính hoạt ảnh và khung hình chính

Chúng tôi có thể làm được nhiều việc hơn với các hiệu ứng chuyển tiếp CSS để làm cho hoạt ảnh này trở nên sáng tạo và tương tác hơn

Cách di chuyển một phần tử bằng Keyframes

Hãy xem một ví dụ trong đó phần tử di chuyển từ điểm A đến điểm B. Chúng tôi sẽ sử dụng translateX và translateY

Và đây là những gì chúng ta nhận được

Lần này, chúng tôi đã sử dụng các thuộc tính mới như hoạt ảnh và khung hình chính. Chúng tôi đã sử dụng thuộc tính

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

3 để xác định tên và thời lượng hoạt ảnh, đồng thời các khung hình chính cho phép chúng tôi mô tả cách phần tử sẽ di chuyển

  animation: moveToRight 2s ease-in-out;

Ở đây tôi đặt tên cho hoạt hình là

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

4 – nhưng bạn có thể sử dụng bất kỳ tên nào bạn thích. Thời lượng là

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

5 và

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

6 là một chức năng định thời gian

Có các chức năng thời gian khác mà bạn có thể sử dụng như

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

7,

 .elem:hover {
      transform: scale(1.1);
    }

7,

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

9 về cơ bản làm cho hoạt ảnh mượt mà hơn. Bạn có thể tìm hiểu thêm về các chức năng thời gian tại đây

  transition: 500ms linear;

0 lấy tên của phim hoạt hình. Trong trường hợp này là

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

4

 @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }

  transition: 500ms linear;

2 sẽ thực hiện hoạt ảnh theo nhiều bước. Ví dụ trên sử dụng tỷ lệ phần trăm để biểu thị phạm vi hoặc thứ tự chuyển tiếp. Chúng ta cũng có thể sử dụng các phương thức

  transition: 500ms linear;

3 và

  transition: 500ms linear;

4. như bên dưới"

 @keyframes moveToRight {
     from {
        transform: translateX(0px);
      }
     to {
        transform: translateX(300px);
      }
    }

  transition: 500ms linear;

3 đại diện cho điểm bắt đầu hoặc bước đầu tiên của hoạt hình

  transition: 500ms linear;

4 là điểm kết thúc hoặc bước cuối cùng của hoạt ảnh được thực hiện

Bạn có thể muốn sử dụng một tỷ lệ phần trăm trong một số trường hợp. Ví dụ: giả sử bạn muốn thêm nhiều hơn hai hiệu ứng chuyển tiếp sẽ được thực hiện theo trình tự, như sau

 .elem:hover {
      transform: scale(1.1);
    }

0

Chúng ta có thể sáng tạo hơn và làm động nhiều thuộc tính cùng lúc như trong ví dụ sau

Bạn có thể thử với các thuộc tính và kỹ thuật hoạt hình trong sandbox tại đây

Chúng ta có thể làm nhiều thứ hơn với các khung hình chính. Trước tiên, hãy thêm nhiều hiệu ứng chuyển tiếp vào hoạt ảnh của chúng ta

Cách tạo hoạt ảnh cho nhiều thuộc tính hơn và đưa chúng vào quá trình chuyển đổi

Lần này chúng ta sẽ tạo hiệu ứng động cho nền và chúng ta sẽ làm cho phần tử di chuyển theo mô hình hình vuông. Chúng tôi sẽ làm cho hoạt ảnh chạy mãi mãi bằng cách sử dụng thuộc tính

  transition: 500ms linear;

7 làm chức năng định thời gian

 .elem:hover {
      transform: scale(1.1);
    }

1

Hãy phá vỡ nó. Đầu tiên, chúng tôi thêm

  transition: 500ms linear;

7 để làm cho hoạt ảnh chạy mãi mãi

 .elem:hover {
      transform: scale(1.1);
    }

2

Và sau đó chúng tôi chia hoạt ảnh thành bốn bước. Ở mỗi bước, chúng tôi sẽ chạy một quá trình chuyển đổi khác nhau và tất cả hoạt ảnh sẽ chạy theo trình tự

• Bước đầu tiên. đặt phần tử theo chiều ngang thành

    transition: 500ms linear;

  9 và thay đổi nền thành gradient

 .elem:hover {
      transform: scale(1.1);
    }

3

• Hoạt hình thứ hai sẽ di chuyển phần tử từ trái sang phải và thay đổi màu nền

 .elem:hover {
      transform: scale(1.1);
    }

4

• Hoạt ảnh thứ ba sẽ di chuyển phần tử xuống dưới bằng cách sử dụng

   .elem {
        background: blueviolet;
        width: 300px;
        height: 150px;
        margin: 20px auto;
        transition: 500ms linear; 
      }

  0 và thay đổi lại màu nền
• Ở bước thứ tư, phần tử sẽ di chuyển về bên trái và thay đổi màu nền
• Trong hoạt hình thứ năm, phần tử sẽ quay trở lại vị trí ban đầu

kết thúc

Trong bài viết này, chúng tôi đã đề cập đến nhiều thứ bạn có thể làm với chuyển tiếp CSS. Bạn có thể sử dụng hiệu ứng chuyển tiếp CSS theo nhiều cách trong ứng dụng của mình để tạo trải nghiệm người dùng tốt hơn

Sau khi tìm hiểu cơ bản về hoạt hình CSS, bạn có thể muốn học xa hơn và tạo ra những thứ phức tạp hơn đòi hỏi sự tương tác của người dùng. Đối với điều này, bạn có thể sử dụng JavaScript hoặc bất kỳ thư viện hoạt ảnh của bên thứ ba nào ngoài đó

Xin chào, tên tôi là Said Hayani Tôi đã tạo subscribi. io để giúp người sáng tạo, người viết blog và người có ảnh hưởng tăng lượng khán giả của họ thông qua bản tin

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Hayani nói

Frontend Developer, Technical Writer, Bootcamp Instructor ➡️ Tham gia lớp học React/React Native của tôi tại nucamp. đồng hành và thay đổi nghề nghiệp sau 6 tháng, sử dụng mã F3748T ➡️ Thông tin liên hệ. nói. dev@gmail. com

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu

Hoạt ảnh chuyển tiếp trong CSS là gì?

Tôi có nên sử dụng CSS chuyển tiếp hoặc hoạt ảnh không?

Thuộc tính chuyển tiếp trong CSS là gì?

Tôi có thể chuyển đổi CSS hiển thị không?