CSS3動畫是一種通過CSS語言來實現網頁元素動態變化的技術。其中勻速動畫的特點是在動畫過程中物體的速度始終保持一定的勻速,不會出現加速或減速的情況。
/*定義勻速動畫*/ .element{ animation: animate 2s linear; } @keyframes animate{ 0%{ opacity: 1; transform: none; } 50%{ opacity: 0.5; transform: translateY(-50px); } 100%{ opacity: 0; transform: translateY(-100px); } }
在上述例子中,我們定義了一個名為animate的關鍵幀動畫,并將它綁定在元素.element上。動畫持續2秒鐘,采用linear的勻速模式。在關鍵幀中,物體從不透明漸變為完全透明,同時做一下垂直方向的移動。而整個過程中物體的速度始終保持不變。
勻速動畫可用于需要穩定、流暢效果的場景中,如動態進度條、輪播圖等。但并不適用于一些需要營造加速或減速效果的場景,此時需要采用其他的緩動函數,如ease、ease-in、ease-out等。
下一篇php cms專題