Hiệu ứng Fade In Up Big (Mờ dần lên lớn) với CSS Animation

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