怎么设置 页面回滚的时候 animate.css 再次执行

2025-12-05 16:18:12
推荐回答(2个)
回答1:

主要需要使用 -webkit-animation
如:
-webkit-animation:gogogo 2s infinite linear ;
其中gogogo是自己定义的动画帧,2s是整个动画的秒数,infinite是永久循环 linear是线性变化 (step-end则是无线性变化,直接输出结果)

代码如下:
CSS:

@-webkit-keyframes gogogo {
0%{

-webkit-transform: rotate(0deg);
border:5px solid red;

}
50%{
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100%{
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}

}

.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear ;
margin:100px;

}

回答2:

用JS来获取距顶部距离来加减动画