W3C 是國際標準化組織,負責制定互聯網的標準。在網頁制作中,CSS 動畫是一個非常重要的部分。W3C 也在規范中提供了詳細的說明。
/* 定義一個動畫 */ @keyframes myanimation { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } /* 鼠標懸停時觸發動畫 */ .my-element { animation: myanimation 2s ease-in-out; } /* 暫停并重置動畫 */ .my-element:hover { animation-play-state: paused; animation-fill-mode: forwards; }
上面的代碼定義了一個名為“myanimation”的動畫,并在鼠標懸停時觸發。動畫中有三個關鍵幀,分別為 0%、50% 和 100%。在這些關鍵幀中,元素的位置會發生變化,從而產生動畫效果。
同時,我們還可以使用 animation-play-state 和 animation-fill-mode 屬性控制動畫的行為。例如上面的代碼在鼠標懸停時暫停動畫,并使元素保持在當前狀態。
總之,W3C 提供了詳細的規范和定義,使得我們可以更加自由和方便地進行 CSS 動畫的制作和使用。
上一篇css動畫fadein
下一篇css動畫 從左向右擴散