Hiệu ứng Fade Out Left (Mờ dần sang trái) với CSS Animation

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