Hiệu ứng Fade Out Down (Mờ dần xuống dưới) với CSS Animation

Để triển khai hiệu ứng Fade Out Down Animation trên hình ảnh với CSS, bạn có thể thử chạy mã sau:

Ví dụ

<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      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 fadeOutDown {
      0% { opacity: 1; -webkit-transform: translateY(0); }
      100% { opacity: 0; -webkit-transform: translateY(20px); }
    }
    @keyframes fadeOutDown {
      0% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(20px); }
    }
    .fadeOutDown {
      -webkit-animation-name: fadeOutDown;
      animation-name: fadeOutDown;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated fadeOutDown"></div>
  <button onclick="myFunction()">Reload page</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>