html - 使用纯 CSS 为未知数量的元素设置动画

标签 html css animation

假设我有一个 ul 包含一些 li 元素。假设我有这样的动画:

@keyframes fcolor {
    from {
        color: #123;
    }
    to {
        color: #456;
    }
}

忽略实际颜色,这只是一个简单的演示。

动画应该(为了这个例子假装动画正常工作)改变每个 li 元素的文本颜色。

有没有一种方法可以将此动画按顺序应用到每个 li 元素,中间有 N 毫秒的延迟?我的意思是,有没有办法将该动画应用到第一个 li,然后等待,比如说,30ms,然后将动画应用到第二个 li,再等待 30ms,应用到第三个,等等...

所有这些都不知道 li 元素的数量。 此外,仅 css。我知道这可以使用 javascript 轻松完成。

我再重复一遍,以防万一。我不知道 li 元素的数量,所以像

这样的解决方案
ul:nth-child(1) {
    animation: fcolor 100ms ease 0ms;
}

ul:nth-child(2) {
    animation: fcolor 100ms ease 30ms;
}

ul:nth-child(3) {
    animation: fcolor 100ms ease 60ms;
}

...

又名,硬编码值,不是我要求的,我会否决这样的答案。

最佳答案

不,您不能仅使用 CSS 来做到这一点(至少现在不能)。


作为一种非 javascript 解决方法,我可以看到一个可行的解决方案,在您的服务器端,使用 ASP 或 PHP,创建您的元素是这样的

<ul>
  <li style="animation-delay: 0s;"> ... </li>
  <li style="animation-delay: 10s;"> ... </li>
  <li style="animation-delay: 20s;"> ... </li>
  <li style="animation-delay: 30s;"> ... </li>
  ....
</ul>

然后在 CSS 中设置其余的动画设置

关于html - 使用纯 CSS 为未知数量的元素设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36403035/

相关文章:

html - 为什么我无法删除 Twitter Bootstrap 中的蓝色文本区域边框?

c# - 命名空间 'Optimization' 中不存在类型或命名空间名称 'System.Web'

css - 下拉菜单难以点击 MaterializeCSS

css - 混合移动应用程序(手机间隙)用户界面中的自定义字体

animation - 如何在Flutter中制作两个GridView元素的切换动画

javascript - Prestashop Blockcart jQuery 删除图像动画

html - 创建边框半径 iframe 插件

html - moz 选择器在 CSS 中不起作用

javascript - 应用 css 后 ng 类中的 Angular Expression 评估(后期绑定(bind))

ios - Gmail iOS 模态视图转换