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

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