CSS3動畫是現代網頁設計中必不可少的一部分。其中,線性動畫(linear)是最基本的一種動畫方式。
.box { width: 200px; height: 200px; background-color: yellow; animation: myLinearAnimation 2s linear infinite; } @keyframes myLinearAnimation { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } }
在上述代碼中,我們定義了一個黃色的方塊,并給它添加了一個名為“myLinearAnimation”的CSS3動畫。關鍵字“linear”表示這個動畫是線性動畫,即動畫的運動軌跡是勻速的。
在動畫的關鍵幀中,我們將方塊向右平移了300像素。因為動畫是線性的,所以方塊的運動速度是勻速的,不會出現加速或減速的情況。
如果我們想讓方塊無限地向右平移,在animation屬性中設置infinite即可。這樣,方塊就會不斷地從左側進入并從右側出去,創造出一個移動的效果。