Rumah > Artikel > hujung hadapan web > Tetapkan tempoh masa yang diambil untuk animasi melengkapkan kitaran menggunakan CSS

Tetapkan tempoh masa yang diambil untuk animasi melengkapkan kitaran menggunakan CSS

王林ke hadapan: 2023-09-21 09:29:08692semak imbas

使用 CSS 设置动画完成一个周期所需的时间

Gunakan sifat animation-duration untuk menetapkan masa yang diperlukan untuk animasi melengkapkan kitaran: #🎜 🎜##🎜 🎜#Contoh

Demonstrasi Dalam Talian

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background: red;
            animation-name: myanim;
            animation-duration: 2s;
         }
         @keyframes myanim {
            from {left: 0px; background-color: green;}
            to {left: 200px; background-color: blue;}
         }
      </style>
   </head>
   <body>
      <div> </div>
   </body>
</html>

Atas ialah kandungan terperinci Tetapkan tempoh masa yang diambil untuk animasi melengkapkan kitaran menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css 循环 animation

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Menggunakan CSS hanya untuk FirefoxArtikel seterusnya：Menggunakan CSS hanya untuk Firefox

Artikel berkaitan

Lihat lagi