Làm mờ hiệu ứng hoạt ảnh với CSS

Để triển khai Hiệu ứng hoạt ảnh mờ dần trên hình ảnh có 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 fadeOutUp {
            0% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
         }

         @keyframes fadeOutUp {
            0% {
               opacity: 1;
               transform: translateY(0);
            }
            100% {
               opacity: 0;
               transform: translateY(-20px);
            }
         }

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

   <body>
      <div id = "animated-example" class = "animated fadeOutUp"></div>
      <button onclick = "myFunction()">Reload page</button>

      <script>
         function myFunction() {
           location.reload();
         }
      </script>
   </body>
</html>