cari

Rumah  >  Artikel  >  hujung hadapan web  >  Gunakan CSS untuk mencapai kesan animasi lantunan yang betul

Gunakan CSS untuk mencapai kesan animasi lantunan yang betul

WBOY
WBOYke hadapan
2023-08-29 08:09:081450semak imbas

使用 CSS 实现正确的弹跳动画效果

Untuk menggunakan CSS untuk mencapai kesan animasi pop-masuk di sebelah kanan, anda boleh cuba menjalankan kod berikut−

#🎜🎜 #Contoh#🎜🎜 #

demonstrasi masa nyata

<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 bounceInRight {
            0% {
               opacity: 0;
               -webkit-transform: translateX(2000px);
            }
            60% {
               opacity: 1;
               -webkit-transform: translateX(-30px);
            }
            80% {
               -webkit-transform: translateX(10px);
            }
            100% {
               -webkit-transform: translateX(0);
            }
         }

         @keyframes bounceInRight {
            0% {
               opacity: 0;
               transform: translateX(2000px);
            }
            60% {
               opacity: 1;
               transform: translateX(-30px);
            }
            80% {
               transform: translateX(10px);
            }
            100% {
               transform: translateX(0);
            }
         }

         .bounceInRight {
            -webkit-animation-name: bounceInRight;
            animation-name: bounceInRight;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated bounceInRight"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Atas ialah kandungan terperinci Gunakan CSS untuk mencapai kesan animasi lantunan yang betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menggunakan pemilih CSS sebagai pencari dalam Selenium?Artikel seterusnya：Bagaimana untuk menggunakan pemilih CSS sebagai pencari dalam Selenium?

Artikel berkaitan

Lihat lagi