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

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