简化此 css/svg 动画

共3个回答, 标签: html css svg css-animations

我正在努力让 rect 改变颜色。每个 rect 将在 0.1 s 延迟时改变。

假设我想有更多的矩形或路径,我如何简化代码?我认为它可以使用 scss 简化,但是使用 CSS 呢?有比我更聪明的方法吗?

# Svg rect: nth-child (1) {
动画: ani 1.8 s 线性无限;
动画-延迟: 0.1 s;
}

# Svg rect: nth-child (1): hover {
动画播放状态: 暂停;
}

# Svg rect: nth-child (2) {
动画: ani 1.8 s 线性无限;
动画-延迟: 0.2 s;
}

# Svg rect: nth-child (2): hover {
动画播放状态: 暂停;
}

# Svg rect: nth-child (3) {
动画: ani 1.8 s 线性无限;
动画-延迟: 0.3 s;
}

# Svg rect: nth-child (3): hover {
动画播放状态: 暂停;
}

# Svg rect: nth-child (4) {
动画: ani 1.8 s 线性无限;
动画-延迟: 0.4 s;
}

# Svg rect: nth-child (4): hover {
动画播放状态: 暂停;
}

# Svg rect: nth-child (5) {
动画: ani 1.8 s 线性无限;
动画-延迟: 0.5 s;
}

# Svg rect: nth-child (5): hover {
动画播放状态: 暂停;
}

@ 关键帧 ani {
0% {
填充: #0057B8;
}
20% {
填充: # F11E4A;
}
40% {
填充: # F8A527;
}
60% {
填充: # 266D7F;
}
80% {
填充: # 82A;
}
100% {
填充: #0057B8;
}
}
第1个答案
    For the :hover and base rect animation duplication, they can each be refactored into their own block.
# Svg rect {
-- 动画 -- 延迟: 0.1 s;
动画: ani 1.8 s 线性无限 var (-- 动画-延迟);
}

# Svg rect: 悬停 {
动画播放状态: 暂停;
}

我会将动画延迟存储在自定义属性中,并将其添加到单独的动画调用中。

# Svg rect {
-- 动画 -- 延迟: 0.1 s;
动画: ani 1.8 s 线性无限 var (-- 动画-延迟);
}

现在,您可以在以后必要时覆盖延迟,例如:

# Svg rect: nth-child (3) {-动画-延迟: 0.2 s;}

延迟将自动更新该孩子的动画。

这是完整的代码:

# Svg rect {
-- 动画 -- 延迟: 0.1 s;
动画: ani 1.8 s 线性无限 var (-- 动画-延迟);
}

# Svg rect: 悬停 {
动画播放状态: 暂停;
}


# Svg rect: nth-child (2) {-动画-延迟: 0.2 s;}
# Svg rect: nth-child (3) {-动画-延迟: 0.3 s;}
# Svg rect: nth-child (4) {-动画-延迟: 0.4 s;}
# Svg rect: nth-child (5) {-动画-延迟: 0.5 s;}
@ 关键帧 ani {
0% {
填充: #0057B8;
}
20% {
填充: # F11E4A;
}
40% {
填充: # F8A527;
}
60% {
填充: # 266D7F;
}
80% {
填充: # 82A;
}

JsFiddle

第2个答案
    All your :hover effects are the same, and so are your animation properties so you can simplify those to one rule each:
# Svg rect {
动画: ani 1.8 s 线性无限;
}

# Svg rect: 悬停 {
动画播放状态: 暂停;
}

这将会大大减少线条,因为动画会延迟自己,你的方法是可以的。

第3个答案
    If you are intrested in a CSS solution you can do something like below. It's a bit different animation but you can easily scale it by keeping the same code.

The trick is to animate the same gradient for all the boxes to simulate the color changes. Note how I made the pseudo element relative to the .box不是具有相同层的子元素

。盒 {
显示: 内联-flex;
边距: 5px;
填充: 50px 20px;
位置: 相对;
背景: 右/800% 100%;
背景图像: 线性梯度 (向左,#0057B8,# F11E4A,# F8A527,# 266D7F,# 82A,#0057B8);
动画: ani 1.8 s 线性无限;
}
。框> div {
边距: 5px;
高度: 55px;
宽度: 55px;
背景图像: 继承;
-Webkit-mask: 线性梯度 (# fff,# fff);
掩模: 线性梯度 (# fff,# fff);
}
。框> div: 之前 {
内容: “”;
位置: 绝对;
顶部: 0;
左: 0;
右: 0;
底部: 0;
背景: 右/1000% 100%;
背景图像: 继承;
动画: ani 2 s 线性无限;
}

。框> div: 悬停: 之前 {
动画播放状态: 暂停;
}

相关问题

RegEx 匹配打开的标记, 但 XHTML 独立标记除外 PHP 邮件功能不能完成电子邮件的发送 如何从最后一行中的元素中删除边框? 如何设置 SVG 多边形的动画来填充? Br 标记可以具有哪些 CSS 属性? 在 HTML 上方绘制箭头 简化此 css/svg 动画 如何在 CSS “过山车” 动画中曲线?