CSS3動畫是現代網站設計的必備技能。它可以為網頁帶來生動、精美的視覺效果,提升用戶體驗、吸引眼球。CSS3動畫有多種觸發方式,包括:
/* 單次觸發方式 */ animation-name: myanimation; /* 動畫的名稱 */ animation-duration: 2s; /* 動畫的時間 */ animation-timing-function: ease; /* 動畫的緩動函數 */ animation-delay: 0s; /* 動畫的延遲時間 */ animation-iteration-count: 1; /* 動畫的重復次數 */ /* 無限重復觸發方式 */ animation-iteration-count: infinite; /* 鼠標懸浮觸發方式 */ :hover { animation-name: myanimation; animation-duration: 2s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; } /* 頁面滾動觸發方式 */ @keyframes myanimation { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } .section { animation-name: myanimation; animation-duration: 1s; animation-timing-function: ease; animation-delay: 0s; animation-fill-mode: both; }
以上代碼演示了單次觸發、無限重復觸發、鼠標懸停觸發和頁面滾動觸發4種方式。通過掌握這些方式,我們可以靈活運用CSS3動畫,為網頁增添不同的特效。
下一篇css3 5邊框