CSS3是CSS標準的最新版本,它引入了許多新特性,包括直線軌跡運動。直線軌跡運動是CSS動畫的一種,它可以使元素沿著指定的直線軌跡移動,從而增強頁面的動效。
/* 軌跡動畫的基本語法 */ /* 指定軌跡路徑 */ @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(200px, 200px); } } /* 應用軌跡動畫 */ .element { animation: move 2s linear; }
上述代碼是一個簡單的軌跡動畫示例。其中,@keyframes
規則指定了一個名為move
的動畫,描述了元素從(0, 0)移動到(200px, 200px)的過程;.element
規則應用了move
動畫,持續時間為2秒,運動方式為線性。
使用直線軌跡運動可以實現諸如飛行、移動等效果,讓頁面元素更加生動有趣。但需要注意的是,軌跡動畫的路徑需按照css3屬性規定的格式書寫,如transform: translate(200px, 200px)
,否則動畫將無法被正確實現。