เอฟเฟกต์ Fade In Up Big Animation ด้วย CSS

เพื่อนำเอฟเฟกต์ Fade In Up Big Animation ไปใช้กับรูปภาพด้วย CSS คุณสามารถลองรันโค้ดต่อไปนี้:

ตัวอย่าง

<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>.