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

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