CSS運行軌跡初始點是用于定義移動物體起始位置的CSS屬性。
animation-name: move; animation-duration: 3s; animation-timing-function: ease-in-out; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }
上述代碼中的@keyframes
定義了對象移動的路徑,0%
和100%
分別表示起點和終點的位置。在這個例子中,運動路徑是水平方向向右移動100像素。
在animation-name
中,我們定義了將要應用的動畫的名稱,這個名稱與@keyframes
中定義的名稱相同。通過animation-duration
,我們定義了動畫的持續時間為3秒。使用animation-timing-function
,我們定義了動畫的時間曲線為ease-in-out,這意味著動畫會先慢然后快,最終變慢。在animation-delay
中,我們定義了動畫在開始之前需要等待的時間。通過animation-iteration-count
,我們定義了動畫的重復次數為無限次。使用animation-direction
,我們定義了對象在動畫周期內的方向。最后,在animation-fill-mode
中,我們定義了動畫結束后,對象應該停留在終點還是回到初始點。
如果您想使對象返回到起點,可以將animation-direction
設置為normal,而將animation-fill-mode
設置為none。