CSS làm mờ chuyển tiếp

Question

Sự miêu tả

Hình ảnh xuất hiện hoặc dần dần xuất hiện hoặc biến mất khỏi tầm nhìn hoặc hợp nhất thành một ảnh khác

Nội dung chính Show

Sự miêu tả
Thông số
Làm mờ dần trong CSS là gì?
Hoạt hình chuyển tiếp trong CSS là gì?
Hoạt hình mờ dần là gì?
Thuộc tính chuyển tiếp trong CSS là gì?

cú pháp

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

Thông số

Chuyển đổi - Chuyển đổi áp dụng cho chuyển đổi 2d và 3d thành một phần tử
Độ mờ - Độ mờ áp dụng cho một phần tử để tạo độ mờ

Thí dụ

   
      
   

   
   
      
      Reload page

đầu ra

Nó sẽ tạo ra kết quả sau -

Tôi đã thực hiện một số trang web có giao diện giống như cửa sổ bật lên - trên thực tế, đó là div có khả năng hiển thị. bị ẩn và khi bạn nhấp vào đâu đó, nó sẽ hiển thị. Tôi cũng đã sử dụng độ mờ để bạn có thể làm mờ dần. Nhưng cho đến tuần này, sự mờ dần không bao giờ hoạt động

Đây là mã của tôi

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ngoài ra còn có một số JavaScript nên khi bạn nhấp vào nút, nó sẽ thêm lớp hiển thị vào cửa sổ bật lên

Dù sao thì các chuyển đổi cũng khó hiểu vì bạn không đặt chúng ở nơi bạn nghĩ ban đầu. Sẽ có ý nghĩa nếu thêm quá trình chuyển đổi vào. hiển thị vì nó đang chuyển đổi khi lớp đó được thêm vào và khi nó bị xóa. Nhưng nếu bạn làm như vậy thì quá trình chuyển đổi chỉ chạy khi được thêm vào. Khi lớp bị xóa, nó không thể chạy quá trình chuyển đổi vì nó không tồn tại

Vì vậy, mà tất cả các công việc, phải không? . Nó mờ đi một cách độc đáo, nhưng biến mất trong nháy mắt. Lý do là vì khi lớp hiển thị được thêm vào, nó sẽ hiển thị ngay lập tức, nhưng phải mất 250 mili giây để thay đổi độ mờ từ 0 thành 1. Đó là những gì chúng tôi muốn xảy ra

Nhưng vì không có chuyển đổi về khả năng hiển thị, nên khi bạn xóa lớp, nó sẽ ngay lập tức bị ẩn và sau đó mất 250 mili giây để thay đổi độ mờ từ 1 thành 0. Bạn không thể nhìn thấy nó vì nó bị ẩn

Để mờ dần, chúng ta có thể sử dụng độ trễ chuyển tiếp để yêu cầu nó hoạt động ở độ mờ trước, sau đó là khả năng hiển thị

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì vậy, bây giờ khi chúng tôi xóa lớp hiển thị, nó sẽ chuyển độ mờ từ 1 thành 0 trong 250 mili giây và sau đó ngay lập tức đặt khả năng hiển thị thành ẩn. Và khi mờ dần, nó sẽ chuyển độ mờ từ 0 thành 1 trong 25ms và sau đó ngay lập tức đặt khả năng hiển thị thành hiển thị. Có nghĩa là bây giờ nó mờ dần nhưng không mờ dần

Giải pháp là tận dụng thực tế là các chuyển đổi trên lớp hiển thị xảy ra khi mờ dần và các chuyển đổi trên lớp bật lên xảy ra khi mờ dần và tắt dần. Chúng ta có thể thêm một dòng vào lớp hiển thị

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

.popup.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0ms;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì. cửa sổ bật lên. chương trình có tính đặc hiệu cao hơn, nó sẽ ghi đè bất cứ thứ gì trong. cửa sổ bật lên. Đó là cách chúng tôi làm cho nó hiển thị và độ mờ 1. Do đó, nó cũng ghi đè độ trễ chuyển tiếp lên khả năng hiển thị. Vì vậy, hiệu quả khi lớp hiển thị được thêm vào, quá trình chuyển đổi trở thành

transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì vậy, khi lớp hiển thị được thêm vào, nó sẽ hiển thị ngay lập tức và sau đó chuyển độ mờ từ 0 sang 1 trong 25 mili giây

Và cuối cùng chúng ta có một cái gì đó mờ dần và mờ dần

Tất nhiên, bạn cũng có thể ghi đè toàn bộ quá trình chuyển đổi bằng

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

.popup.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhưng nói chung, bạn không muốn viết cùng một thứ ở nhiều nơi. nếu bạn quyết định quá trình chuyển đổi quá chậm, bạn phải thay đổi 250 mili giây ở ba vị trí. Nhưng trong mã trước đó, bạn chỉ phải thay đổi nó ở hai nơi

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 các 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

Chuyển đổi CSS cung cấp một cách để kiểm soát tốc độ hoạt ảnh khi thay đổi thuộc tính CSS. Thay vì thay đổi thuộc tính có hiệu lực ngay lập tức, bạn có thể khiến các thay đổi trong thuộc tính diễn ra trong một khoảng thời gian. Ví dụ: nếu bạn thay đổi màu của một phần tử từ trắng sang đen, thường thì sự thay đổi đó là tức thời. Khi bật tính năng chuyển đổi CSS, các thay đổi xảy ra ở các khoảng thời gian theo một đường cong gia tốc, tất cả đều có thể được tùy chỉnh

Các hoạt ảnh liên quan đến quá trình chuyển đổi giữa hai trạng thái thường được gọi là chuyển đổi ngầm định vì các trạng thái ở giữa trạng thái bắt đầu và trạng thái kết thúc được trình duyệt xác định ngầm định

Quá trình chuyển đổi CSS cho phép bạn quyết định thuộc tính nào sẽ tạo hoạt ảnh (bằng cách liệt kê chúng một cách rõ ràng), thời điểm hoạt ảnh sẽ bắt đầu (bằng cách đặt độ trễ), quá trình chuyển đổi sẽ kéo dài bao lâu (bằng cách đặt thời lượng) và quá trình chuyển đổi sẽ chạy như thế nào (bằng cách xác định . g. , tuyến tính hoặc nhanh ở đầu, chậm ở cuối)

Tác giả Web có thể xác định thuộc tính nào phải được làm động và theo cách nào. Điều này cho phép tạo ra các chuyển tiếp phức tạp. Vì không có ý nghĩa gì khi tạo hoạt ảnh cho một số thuộc tính, danh sách các thuộc tính có thể hoạt ảnh được giới hạn trong một tập hợp hữu hạn

Ghi chú. Tập hợp các thuộc tính có thể hoạt hình đang thay đổi khi thông số kỹ thuật phát triển

Ghi chú. Giá trị

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

5 thường là một trường hợp rất phức tạp. Thông số kỹ thuật khuyến nghị không tạo hiệu ứng động từ và đến

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

5. Một số tác nhân người dùng, như những tác nhân dựa trên Gecko, thực hiện yêu cầu này và những tác nhân khác, như những tác nhân dựa trên WebKit, ít nghiêm ngặt hơn. Sử dụng hình ảnh động với

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

5 có thể dẫn đến kết quả không thể đoán trước, tùy thuộc vào trình duyệt và phiên bản của nó, và nên tránh

Chuyển đổi CSS được kiểm soát bằng cách sử dụng thuộc tính tốc ký

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

8. Đây là cách tốt nhất để định cấu hình chuyển đổi, vì nó giúp tránh các tham số không đồng bộ hóa dễ dàng hơn, điều này có thể rất khó chịu khi phải dành nhiều thời gian để gỡ lỗi trong CSS

Bạn có thể kiểm soát các thành phần riêng lẻ của quá trình chuyển đổi bằng các thuộc tính phụ sau

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

9

Chỉ định tên hoặc tên của các thuộc tính CSS mà các hiệu ứng chuyển tiếp sẽ được áp dụng. Chỉ các thuộc tính được liệt kê ở đây là hoạt hình trong quá trình chuyển đổi;

   
      
   

   
   
      
      Reload page

20

Chỉ định khoảng thời gian mà quá trình chuyển đổi sẽ xảy ra. Bạn có thể chỉ định một khoảng thời gian duy nhất áp dụng cho tất cả các thuộc tính trong quá trình chuyển đổi hoặc nhiều giá trị để cho phép mỗi thuộc tính chuyển đổi trong một khoảng thời gian khác nhau

   
      
   

   
   
      
      Reload page

21

Chỉ định một hàm để xác định cách tính các giá trị trung gian cho các thuộc tính. Các hàm thời gian xác định cách tính các giá trị trung gian của quá trình chuyển đổi. Hầu hết các chức năng thời gian có thể được chỉ định bằng cách cung cấp đồ thị của chức năng tương ứng, như được xác định bởi bốn điểm xác định khối bezier. Bạn cũng có thể chọn nới lỏng từ Easing Functions Cheat Sheet

   
      
   

   
   
      
      Reload page

22

Xác định khoảng thời gian chờ giữa thời điểm một thuộc tính được thay đổi và quá trình chuyển đổi thực sự bắt đầu

Cú pháp CSS tốc ký của

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

8 được viết như sau

   
      
   

   
   
      
      Reload page

6

Ví dụ này thực hiện quá trình chuyển đổi kích thước phông chữ trong bốn giây với độ trễ hai giây giữa thời điểm người dùng di chuột qua phần tử và thời điểm bắt đầu hiệu ứng hoạt hình

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

   
      
   

   
   
      
      Reload page

2

Nội dung CSS

   
      
   

   
   
      
      Reload page

9

Nếu danh sách giá trị của bất kỳ thuộc tính nào ngắn hơn các thuộc tính khác, các giá trị của thuộc tính đó sẽ được lặp lại để làm cho chúng khớp với nhau. Ví dụ

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

0

Điều này được đối xử như thể nó là

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

1

Tương tự, nếu danh sách giá trị của bất kỳ thuộc tính nào dài hơn danh sách của

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

9, thì danh sách đó sẽ bị cắt bớt, vì vậy nếu bạn có CSS sau

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

3

Điều này được hiểu là

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

4

Một cách sử dụng phổ biến của CSS là làm nổi bật các mục trong menu khi người dùng di con trỏ chuột qua chúng. Thật dễ dàng để sử dụng hiệu ứng chuyển tiếp để làm cho hiệu ứng hấp dẫn hơn nữa

Đầu tiên, chúng tôi thiết lập menu bằng HTML

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

5

Sau đó, chúng tôi xây dựng CSS để triển khai giao diện của menu

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

6

CSS này thiết lập giao diện của menu, với màu nền và màu văn bản đều thay đổi khi phần tử ở trạng thái

   
      
   

   
   
      
      Reload page

25 và

   
      
   

   
   
      
      Reload page

26

Ghi chú. Cần thận trọng khi sử dụng chuyển đổi ngay sau khi

thêm phần tử vào DOM bằng cách sử dụng

   
      
   

   
   
      
      Reload page

27

xóa thuộc tính

   
      
   

   
   
      
      Reload page

28 của phần tử

Điều này được coi như thể trạng thái ban đầu chưa bao giờ xảy ra và phần tử luôn ở trạng thái cuối cùng. Cách dễ dàng để khắc phục giới hạn này là áp dụng một

   
      
   

   
   
      
      Reload page

29 trong một vài mili giây trước khi thay đổi thuộc tính CSS mà bạn định chuyển sang

Chuyển tiếp là một công cụ tuyệt vời để làm cho mọi thứ trông mượt mà hơn mà không cần phải làm gì với chức năng JavaScript của bạn. Lấy ví dụ sau

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

0

Sử dụng JavaScript, bạn có thể tạo hiệu ứng di chuyển quả bóng đến một vị trí nhất định

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

1

Với CSS, bạn có thể làm cho nó mượt mà mà không cần nỗ lực thêm. Thêm phần chuyển tiếp vào phần tử và mọi thay đổi sẽ diễn ra suôn sẻ

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

2

Bạn có thể sử dụng sự kiện

   
      
   

   
   
      
      Reload page

90 để phát hiện một hoạt ảnh đã chạy xong. Đây là một đối tượng

   
      
   

   
   
      
      Reload page

91, có hai thuộc tính được thêm vào ngoài một đối tượng

   
      
   

   
   
      
      Reload page

92 điển hình

   
      
   

   
   
      
      Reload page

93

Một chuỗi cho biết tên của thuộc tính CSS có quá trình chuyển đổi đã hoàn tất

   
      
   

   
   
      
      Reload page

94

Một số float cho biết số giây mà quá trình chuyển đổi đã chạy vào thời điểm sự kiện được kích hoạt. Giá trị này không bị ảnh hưởng bởi giá trị của

   
      
   

   
   
      
      Reload page

22

Như thường lệ, bạn có thể sử dụng phương pháp

   
      
   

   
   
      
      Reload page

96 để theo dõi sự kiện này

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

3

Bạn phát hiện thời điểm bắt đầu quá trình chuyển đổi bằng cách sử dụng

   
      
   

   
   
      
      Reload page

97 (kích hoạt trước bất kỳ độ trễ nào) và

   
      
   

   
   
      
      Reload page

98 (kích hoạt sau bất kỳ độ trễ nào), theo cùng một kiểu

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

4

Ghi chú. Sự kiện

   
      
   

   
   
      
      Reload page

90 không kích hoạt nếu quá trình chuyển đổi bị hủy bỏ trước khi quá trình chuyển đổi hoàn tất vì phần tử được tạo

.popup {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

00_______201 hoặc giá trị của thuộc tính hoạt ảnh bị thay đổi

Làm mờ dần trong CSS là gì?

Chuyển tiếp mờ dần trong CSS là hiệu ứng phong cách cho phép các yếu tố như nền, hình ảnh hoặc văn bản dần dần biến mất hoặc xuất hiện trên trang web. To apply a fade-out effect on an element, you need to use either the animation or transition property in CSS.

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

Chuyển tiếp CSS cung cấp cách kiểm soát tốc độ hoạt ảnh khi thay đổi thuộc tính CSS . Thay vì thay đổi thuộc tính có hiệu lực ngay lập tức, bạn có thể khiến các thay đổi trong thuộc tính diễn ra trong một khoảng thời gian.

Hoạt hình mờ dần là gì?

Hoạt ảnh mờ dần làm mờ dần các đối tượng theo thời gian . Hoạt hình mờ dần được áp dụng cho tất cả các phần tử XAML trong bảng điều khiển/bảng điều khiển chính của nó. Hoạt hình mờ dần không ảnh hưởng đến chức năng của điều khiển. Dùng thử trong ứng dụng mẫu.

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

Thuộc tính chuyển tiếp chỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho (hiệu ứng chuyển tiếp sẽ bắt đầu khi CSS được chỉ định . Mẹo. Hiệu ứng chuyển tiếp thường có thể xảy ra khi người dùng di chuột qua một phần tử.

programming css

CSS làm mờ chuyển tiếp

Sự miêu tả

cú pháp

Thông số

Thí dụ

đầu ra

Nội dung CSS

Làm mờ dần trong CSS là gì?

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

Hoạt hình mờ dần là gì?

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội