CSS-এ Fade Down Big অ্যানিমেশন ইফেক্ট

CSS-এ একটি ইমেজে Fade Down Big অ্যানিমেশন ইফেক্ট বাস্তবায়ন করতে নিচের কোড চালান:

উদাহরণ

<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 fadeOutDownBig {             0% {                opacity: 1;                -webkit-transform: translateY(0);             }             100% {                opacity: 0;                -webkit-transform: translateY(2000px);             }          }          @keyframes fadeOutDownBig {             0% {                opacity: 1;                transform: translateY(0);             }             100% {                opacity: 0;                transform: translateY(2000px);             }          }          .fadeOutDownBig {             -webkit-animation-name: fadeOutDownBig;             animation-name: fadeOutDownBig;          }       </style>    </head>    <body>       <div id = "animated-example" class = "animated fadeOutDownBig"></div>       <button onclick = "myFunction()">Reload page</button>          <script>             function myFunction() {             location.reload();          }       </script>    </body> </html>