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

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