寻求一些关于尝试实现特定动画的帮助。我正在尝试创建类似于 infinite expanding rings seen here 的序列. (示例环正在收缩,我正在寻找另一个方向)。
到目前为止我已经有了一个很好的开始,我只是不确定如何让它“平滑地”循环,或者是否仅使用 CSS 就可以实现。
非常感谢任何提示或想法。谢谢!
最佳答案
首先,让我们创建 6 个环
<div id="r1" class="ring"></div>
<div id="r2" class="ring"></div>
<div id="r3" class="ring"></div>
<div id="r4" class="ring"></div>
<div id="r5" class="ring"></div>
<div id="r6" class="ring"></div>
还有 CSS:
.ring {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: transparent;
border: 15px gray solid;
-webkit-animation-name: ani;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 6s;
-webkit-animation-direction: reverse;
}
@-webkit-keyframes ani {
0% {-webkit-transform: scale(1); opacity: 0;}
10% {-webkit-transform: scale(1); opacity: 1;}
99.9% {-webkit-transform: scale(0.1); opacity: 1}
100% {-webkit-transform: scale(0.1); opacity: 0}
}
#r2 { -webkit-animation-delay: 1s;}
#r3 { -webkit-animation-delay: 2s;}
#r4 { -webkit-animation-delay: 3s;}
#r5 { -webkit-animation-delay: 4s;}
#r6 { -webkit-animation-delay: 5s;}
想法是让环出现在最小尺度,从最小尺度到最大尺度,然后让它消失。
要为 n 个环制作它,您不需要创建不同的动画,只需在初始延迟后重用相同的动画即可。
我误读了你的问题,没有看到你想要视频的反面。我后来修复了它,将 animaion 设置为相反;对不起!
webkit demo
更好的解决方案:
CSS
.ring {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: transparent;
border: 15px gray solid;
-webkit-animation-name: ani;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-direction: normal;
}
@-webkit-keyframes ani {
0% {-webkit-transform: scale(0.01); opacity: 0}
1% {-webkit-transform: scale(0.01); opacity: 1}
95% {-webkit-transform: scale(1); opacity: 1;}
100% {-webkit-transform: scale(1); opacity: 0;}
}
#r2 { -webkit-animation-delay: -1s;}
#r3 { -webkit-animation-delay: -2s;}
#r4 { -webkit-animation-delay: -3s;}
#r5 { -webkit-animation-delay: -4s;}
#r6 { -webkit-animation-delay: -5s;}
new demo
我已经更改了关键帧,现在它可以正常运行了。更重要的是,将延迟设置为负数,您可以将圆环分开,但动画会立即开始。
关于CSS3 动画环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17766414/