Làm mờ css hoạt hình

Nếu bạn đã từng sử dụng phần mềm chỉnh sửa video — cho dù đó là Windows Movie Maker hay Adobe Premiere Pro — thì rất có thể bạn đã quen thuộc với hiệu ứng chuyển tiếp video mờ dần và mờ dần. Chúng cực kỳ hiệu quả để tạo cảm giác đẹp và bóng bẩy, và không có lý do gì mà bạn không có được thứ đó trong kho vũ khí của mình khi lập trình ứng dụng web

Với việc phát hành CSS3, giờ đây bạn có thể tạo hoạt ảnh CSS gốc để tạo hoạt ảnh cho các thành phần HTML của mình

Một hoạt ảnh mà bạn có thể tạo bằng CSS là hoạt ảnh mờ dần, trong đó phần tử sẽ từ từ chuyển từ vô hình sang hiển thị

Đây là mã cho hoạt ảnh mờ dần CSS. Tôi sẽ giải thích mã dưới đây

.fade-in:hover {
  animation-name: FadeIn;
  animation-duration: 3s;
  transition-timing-function: linear;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Đầu tiên, một quy tắc CSS được áp dụng cho lớp giả fade-in:hover để hoạt ảnh sẽ chạy khi người dùng di chuột qua phần tử có lớp

Hoạt ảnh mà chúng tôi muốn tạo là hoạt ảnh mờ dần và có thể tạo hoạt ảnh này bằng cách chuyển dần độ mờ của phần tử từ

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

0 sang

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

1

Hoạt ảnh trong CSS được tạo bằng quy tắc

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

2, vì vậy chúng tôi đặt quy tắc bên trong

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

2 như sau

• <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animationh1>
  div>
  

  4 Khi hoạt ảnh bắt đầu ở

  <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animationh1>
  div>
  

  5, hãy đặt

  <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animationh1>
  div>
  

  6 thành 0

• <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animationh1>
  div>
  

  0 Khi hoạt ảnh kết thúc lúc

  <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animationh1>
  div>
  

  1, hãy đặt

  <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animationh1>
  div>
  

  6 thành một

Các quy tắc trên là đủ để tạo hoạt ảnh mờ dần. Tiền tố phía trước các quy tắc khung hình chính ở trên cũng được thêm vào để hỗ trợ các trình duyệt cũ hơn

Tiếp theo, các quy tắc

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

2 được áp dụng cho lớp

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

4 bằng cách sử dụng thuộc tính

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

5

Thuộc tính

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

5 chỉ định tên của quy tắc CSS

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

2 mà bạn muốn áp dụng cho phần tử. t

Thuộc tính

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

8 chỉ định thời lượng của hoạt ảnh tính bằng giây. Trong ví dụ trên, sẽ mất 3 giây để hoạt ảnh chuyển từ

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

5 sang

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

1

Thuộc tính cuối cùng fade-in:hover1 là kiểm soát tốc độ tăng tốc của hiệu ứng hoạt hình. Giá trị fade-in:hover2 có nghĩa là hoạt ảnh sẽ được thực hiện ở tốc độ không đổi

Bạn có thể đặt các giá trị khác trong fade-in:hover1, chẳng hạn như

• fade-in:hover4 - hoạt ảnh sẽ tăng tốc vào giữa quá trình chuyển đổi rồi chậm lại
• fade-in:hover5 - hoạt hình bắt đầu chậm rồi tăng tốc
• fade-in:hover5 - hoạt ảnh bắt đầu nhanh rồi chậm dần cho đến khi kết thúc
• fade-in:hover7 - giống như sự dễ dàng nhưng với một giá trị chính xác khác

Nhưng nếu bạn không có bất kỳ sở thích nào, thì fade-in:hover2 sẽ là một lựa chọn tốt vì hoạt ảnh sẽ có tốc độ chuyển tiếp không đổi

Bạn có thể thêm lớp

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

4 vào bất kỳ phần tử HTML nào, bao gồm văn bản, danh sách, bảng và hình ảnh

Hãy kiểm tra hoạt ảnh mà chúng tôi đã tạo ở trên trong phần tử

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animationh1>
div>

00. Tôi sẽ thêm màu nền và phần đệm để làm cho phần tử lớn hơn