// 进一步调整贝塞尔曲线
// 你可以通过调整 cubic-bezier 函数的参数来实现不同的动画效果:
// cubic-bezier(0, 0, 1, 1):线性动画。
// cubic-bezier(0.42, 0, 1, 1):ease-in 动画。
// cubic-bezier(0, 0, 0.58, 1):ease-out 动画。
// cubic-bezier(0.42, 0, 0.58, 1):ease-in-out 动画。
//动画暂停 :style="{animationPlayState: timer?'running':'paused'}"
//animation-play-state:paused; paused暂停 running播放
.box{
position: absolute; //加上这个动画才会生效
animation: one1 5s 0s infinite linear , one2 5s 0s infinite cubic-bezier(.66, .1, 1, .41) ;
}
@keyframes one1 {
0% {
left: -300px;
}
100% {
left: 400px;
}
}
@keyframes one2 {
0% {
bottom: -100px
}
100% {
bottom: 500px
}
}
css animatio 实现贝塞尔曲线运动
于 2024-07-11 11:47:36 首次发布