我正在玩css-doodle,并且试图在网格中制作螺旋形的动画。
我想做的是让它在无限循环和渐进之间交替变化。即使我在infinite
属性中添加了animation
参数,目前我也只能让它播放一次动画。
我正在尝试使用两个动画:
@keyframes bg {
0% {
background: transparent;
}
0.08%, 100% {
background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
}
}
@keyframes bg-reverse {
0% {
background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
}
0.08%, 100% {
background: transparent;
}
}
然后像下面这样无限延迟地播放它们:
animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;
这是我的密码笔:https://codepen.io/anon/pen/xzWxrd?editors=1000
有人看到我在做什么错吗?
编辑:添加了代码段。反向动画似乎在这里不起作用:S
html, body {
height: 100%;
margin: 0
}
body {
display: flex;
align-items: center;
justify-content: center
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
@grid: 11 / 10em;
@shape: square;
}
--x: calc(0 - @row() + 6);
--y: calc(0 - @col() + 6);
--Absx: calc(@abs(0 - @row() + 6));
--Absy: calc(@abs(0 - @col() + 6));
--A: calc(@abs(@abs(0 - @row() + 6) - @abs(0 - @col() + 6)) + var(--Absx) + var(--Absy));
--A2: calc(var(--A) * var(--A));
--SGN: calc(@abs(0 - @row() + 6 + 0 - @col() + 6 + 0.1)/(var(--x) + var(--y) + 0.1));
--Axy: calc(var(--A) + var(--x) - var(--y));
--RES: calc(var(--A2) + var(--Axy)*var(--SGN) + 1);
#mtv921
animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;
@keyframes bg {
0% {
background: transparent;
}
0.08%, 100% {
background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
}
}
@keyframes bg-reverse {
0% {
background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
}
0.08%, 100% {
background: transparent;
}
}
</css-doodle>