CSS3動畫是網頁設計中常用的技巧之一,它可以為網頁添加豐富的視覺效果。其中,CSS3動畫的timing function是控制動畫速度的重要函數,其中,linear就是其中一個常用的timing function。
div{ background-color:#F44336; width:100px; height:100px; animation: myAnimation 1s linear infinite; } @keyframes myAnimation { 0% { transform: translateY(0px);} 100% { transform: translateY(100px);} }
在這個例子中,我們使用了linear作為animation的timing function。其中,linear是一個等速運動,表示動畫的速度始終保持不變,直到它完成。這意味著要移動一個物體,它的速度始終是一致的,不會出現加速或減速的情況。
在這個例子中,我們使用了keyframe來定義動畫,這樣我們可以控制動畫的開始和結束狀態。我們定義一個div元素,然后使用關鍵幀myAnimation,將div元素沿著垂直方向向下移動100px。在animation屬性中,我們將timing function設置為linear,意味著動畫速度將保持不變,無限循環。
總的來說,使用linear函數可以使CSS3動畫保持基本的等速運動效果。當我們需要物體不加速或減速時,linear是一個不錯的選擇。
上一篇ajax 標記文本背景色
下一篇archive php