Hiệu ứng Fade Out Right (Mờ dần sang phải) với CSS Animation

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