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

Để triển khai hiệu ứng Fade In 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 fadeInDown {
      0% { opacity: 0; -webkit-transform: translateY(-20px); }
      100% { opacity: 1; -webkit-transform: translateY(0); }
    }
    @keyframes fadeInDown {
      0% { opacity: 0; transform: translateY(-20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated fadeInDown"></div>
  <button onclick="myFunction()">Reload page</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>