CSS3動畫是一種使用CSS3技術創建動畫效果的方式。它可以在網頁中輕松添加動態和互動性,使用戶對網頁的體驗更加豐富和有趣。
下面介紹一些常見的CSS3動畫開始的方法:
/* transition動畫 */ .box { width: 100px; height: 100px; background-color: red; transition: all 1s ease; } .box:hover { transform: translateX(20px); } /* keyframes動畫 */ @keyframes example { 0% {transform: scale(1);} 25% {transform: scale(1.2);} 50% {transform: scale(1.4);} 75% {transform: scale(1.2);} 100% {transform: scale(1);} } .box { width: 100px; height: 100px; background-color: red; animation: example 2s ease infinite; } /* animation動畫 */ .box { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 2s; animation-timing-function: ease; animation-iteration-count: infinite; }
以上是三種常見的CSS3動畫開始的方法。使用這些方法,我們可以輕松地創建出各種動態效果。當然,在實際開發中,我們還需要結合具體的需求和場景選擇合適的動畫效果。