CSS3 Transition - Hiệu ứng mờ dần

Question 1

Tôi đang cố gắng triển khai hiệu ứng "fade out" trong CSS thuần túy. Đây là trò chơi . Tôi đã xem xét một số giải pháp trực tuyến, tuy nhiên, sau khi đọc tài liệu trực tuyến , tôi đang cố gắng tìm ra lý do tại sao hoạt ảnh trang chiếu không hoạt động. Bất kỳ gợi ý?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

Mở rộng đoạn mã

Question 2

Bạn có thể sử dụng chuyển đổi để thay thế:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

Question 3

Đây là một cách khác để làm tương tự.

phai màu

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

hiệu ứng fadeOut

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: Tôi đã tìm thấy hướng dẫn cập nhật hơn CSS3 Transition: fadeIn và fadeOut như các hiệu ứng để ẩn các phần tử hiển thị và Chú giải công cụ Ví dụ: Hiển thị Ẩn Gợi ý hoặc Văn bản Trợ giúp bằng cách sử dụng CSS3 Transition tại đây với mã mẫu.

UPDATE 2: (Đã thêm chi tiết do @ big-money yêu cầu)

Khi hiển thị phần tử (bằng cách chuyển sang lớp hiển thị), chúng ta muốn khả năng hiển thị: hiển thị xuất hiện ngay lập tức, vì vậy chỉ cần chuyển thuộc tính opacity là được. Và khi ẩn phần tử (bằng cách chuyển sang lớp ẩn), chúng ta muốn trì hoãn khai báo khả năng hiển thị: ẩn, để chúng ta có thể nhìn thấy quá trình chuyển đổi mờ dần trước. Chúng tôi đang thực hiện việc này bằng cách khai báo một quá trình chuyển đổi trên thuộc tính khả năng hiển thị, với thời lượng 0 giây và độ trễ. Bạn có thể xem chi tiết bài viết tại đây.

Tôi biết tôi đã quá muộn để trả lời nhưng đăng câu trả lời này để tiết kiệm thời gian cho người khác. Hy vọng nó sẽ giúp bạn !!

Question 4

Vì displaykhông phải là một trong những thuộc tính CSS động. Một display:nonethay thế hoạt ảnh fadeOut bằng hoạt ảnh CSS3 thuần túy, chỉ cần đặt width:0và height:0ở khung cuối cùng, và sử dụng animation-fill-mode: forwardsđể giữ width:0và height:0thuộc tính.

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

Question 5

Đây là mã làm việc cho câu hỏi của bạn.
Thưởng thức mã hóa ....

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

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

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

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>

Question 6

Bạn quên thêm thuộc tính vị trí vào .dummy-wraplớp và các giá trị trên cùng / trái / dưới cùng / phải không áp dụng cho các phần tử được định vị tĩnh (mặc định)

http://jsfiddle.net/dYBD2/2/

Question 7

.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

demo tại đây.