問題描述
連續貝塞爾動畫，不繼承變化時的緩動功能 (Continuous bezier animation without inheriting easing‑function on change)
我有這個動畫，它目前只是在開始時很快，但是當它達到 85% ‑ 95% 時，三次貝塞爾曲線應該持續緩慢，而不是再次從點 0 開始並創建另一個快速啟動動作. 有沒有辦法為每個動畫狀態變化添加多個三次貝塞爾曲線，或者讓緩動函數在狀態之間連續？
.animate‑winner {
animation: rollWinnerBait 9s cubic‑bezier(0,.9,.76,.99) forwards normal 1
}
@keyframes rollWinnerBait {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(‑80px)
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(‑9px)
}
100% {
transform: translateX(0px)
}
}
參考解法
方法 1:
Update the timing function inside the animation:
.animate‑winner {
animation: rollWinnerBait 5s cubic‑bezier(0, .9, .76, .99) forwards;
width:100px;
height:100px;
margin:5px;
background:red;
}
.animate‑winner.new {
animation: rollWinnerBait‑new 5s cubic‑bezier(0, .9, .76, .99) forwards;
}
@keyframes rollWinnerBait {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(‑80px);
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(‑9px)
}
100% {
transform: translateX(0px);
}
}
@keyframes rollWinnerBait‑new {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(‑80px);
animation‑timing‑function:linear;
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(‑9px)
}
100% {
transform: translateX(0px);
animation‑timing‑function:linear;
}
}<div class="animate‑winner"></div>
<div class="animate‑winner new"></div>(by Shimsho、Temani Afif)