cari

Rumah  >  Artikel  >  hujung hadapan web  >  Gunakan CSS untuk menetapkan masa main balik animasi

Gunakan CSS untuk menetapkan masa main balik animasi

WBOY
WBOYke hadapan
2023-09-10 08:53:071028semak imbas

使用 CSS 设置动画播放次数

Gunakan sifat animation-iteration-countuntuk menetapkan bilangan kali animasi harus dimainkan melalui CSS

Contoh

Demo langsung

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo1 {animation-timing-function: ease;}
         #demo2 {animation-timing-function: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
      <div id = "demo2">ease-in effect</div>
   </body>
</html>

Atas ialah kandungan terperinci Gunakan CSS untuk menetapkan masa main balik animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css count animation
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat halaman web yang boleh dicetak menggunakan pertanyaan media CSS?Artikel seterusnya：Bagaimana untuk membuat halaman web yang boleh dicetak menggunakan pertanyaan media CSS?

Artikel berkaitan

Lihat lagi