在進行 CSS 動畫過程中,我們可能需要加上一定的等待時間,使得動畫更加流暢。那么,CSS 動畫怎么等待呢?下面我們就來進行介紹。
/* 一、使用 transition-delay 實現等待 */ .box { width: 100px; height: 100px; background-color: blue; transition: background-color 1s linear; transition-delay: 2s; /* 指定了延遲等待的時間 */ } /* 二、使用 animation-delay 實現等待 */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(300px); } } .box { width: 100px; height: 100px; background-color: blue; animation: move 3s linear 2s; /* 指定了延遲等待的時間 */ }
以上就是 CSS 動畫等待的兩種常用實現方式:使用 transition-delay 或者是 animation-delay。它們的具體使用方式也都已經展示出來了,大家可以根據自己的實際情況進行選擇和使用。
下一篇mysql數據庫集成