给定了一大组<hr> html元素，它们在页面加载时应该一个接一个地改变颜色。在动画工作的那一刻，它需要在CSS中为html中的每个新添加的元素添加<hr>元素，并在CSS中进行大量的重复性手动操作。由于每个下一个<hr>行的转换时间间隔是相同的，这是否可以在CSS中以更优雅和更短的方式编写？如何将许多CSS动画nth类型的选择器合并为一个？

目标是能够添加新的hr元素而不需要每次都更改CSS。

又一次：这个问题是关于如何在CSS中单独做到这一点（更优雅）？（没有JS/SASS/SCSS）

nav hr{ 
 
    border-top: 3px solid #BBB; 
 
    border-bottom: 0px; 
 
    margin: 10px 0; 
 
} 
 
\t 
 
nav hr:nth-of-type(01){animation: .5s ease 0.0s 1 gogo} 
 
nav hr:nth-of-type(02){animation: .5s ease 0.1s 1 gogo} 
 
nav hr:nth-of-type(03){animation: .5s ease 0.2s 1 gogo} 
 
nav hr:nth-of-type(04){animation: .5s ease 0.3s 1 gogo} 
 
nav hr:nth-of-type(05){animation: .5s ease 0.4s 1 gogo} 
 
nav hr:nth-of-type(06){animation: .5s ease 0.5s 1 gogo} 
 
nav hr:nth-of-type(07){animation: .5s ease 0.6s 1 gogo} 
 
nav hr:nth-of-type(08){animation: .5s ease 0.7s 1 gogo} 
 
nav hr:nth-of-type(09){animation: .5s ease 0.8s 1 gogo} 
 
nav hr:nth-of-type(10){animation: .5s ease 0.9s 1 gogo} 
 
nav hr:nth-of-type(11){animation: .5s ease 1.0s 1 gogo} 
 
nav hr:nth-of-type(12){animation: .5s ease 1.1s 1 gogo} 
 
/* Boy this takes a lot of time for every new <hr> added in the html */ 
 

 
@keyframes gogo { 
 
    0% {border-top-color: #DDD} 
 
    100% {border-top-color: #00F} 
 
}

<nav> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
</nav>

JSFiddle Demo

来源

2017-10-17 Sam

javascript是不是问题？这将是我认为的显而易见的解决方案... – Mikk3lRo

你不能“优雅地”做到这一点，你只需要将它们结合起来。 – TylerH

[保持CSS3动画结束时的最终状态]的可能重复（https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation） – tobiv

使用更少或SCSS你可以生成你的CSS没有体力劳动。但它还远非优雅。

也许一些CSS天才知道的东西我不知道，但我没有看到周围的一些最小的JavaScript任何方式：

var hrs = document.getElementsByTagName('hr'); 
 
for (var c = 0; c < hrs.length; c++) { 
 
    hrs[c].style.animation = ".5s ease " + (c * 0.1) + "s 1 forwards gogo"; 
 
}

nav hr { 
 
    border-top: 3px solid #BBB; 
 
    border-bottom: 0px; 
 
    margin: 10px 0; 
 
} 
 

 
@keyframes gogo { 
 
    0% { 
 
    border-top-color: #DDD 
 
    } 
 
    100% { 
 
    border-top-color: #00F 
 
    } 
 
}

<nav> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
    <hr> 
 
</nav>

来源

2017-10-17 22:00:56 Mikk3lRo

感谢您的回答@ Mikk3lRo！这个问题是关于如何在纯粹的CSS中做到这一点（更优雅）！（没有js/sass/scss）。仍然+1您的答案：如果没有纯粹的CSS方法存在，那么我会考虑你的答案。 – Sam

我确实了解它，并且我确实了解*不希望为视觉样式使用JS。我也希望能有人提出一个纯粹的CSS解决方案，因为这将在许多情况下非常有用......我只是怀疑它存在足以建议这种（实际）解决方案，以适应您的（实际）问题;） – Mikk3lRo

谢谢队友@ Mikk3lRo你的评论激发了我对我的问题的赏金，我将（明天可以获得赏金） – Sam

为了使hr住宿蓝您可以使用forwards作为动画填充模式，并动态增加每个div的延迟时间，您需要scss。 DEMO

$delay: 0.0s; 

@for $i from 1 through 9 { 
    hr:nth-child($i) { 
    $delay = $delay + 0.1s; 
    animation: .5s ease $delay 1 forwards gogo; 
    } 
}

来源

2017-10-17 22:01:10

感谢您的回答@Nadad Vracar！这个问题是关于如何在纯粹的CSS中做到这一点（更优雅）！（没有js/sass/scss）。仍然+1您的答案：如果没有纯粹的CSS方法存在，那么我会考虑你的答案。 – Sam

如何将许多CSS动画nth类型的选择器合并为一个？

JSFiddle Demo

回答

相关问题