我如何知道 CSS 动画何时应用于包含元素，何时应直接应用于元素?

Question

我正在尝试在没有 JavaScript 的情况下创建一个完整的背景图像幻灯片，在尝试遵循代码示例后，我不确定何时适合将动画应用于元素的容器或何时将其直接应用于元素本身。正如您在代码中看到的，当要对img进行动画处理时，动画直接应用于元素，但使用h3元素时，动画将应用于容器。我只想知道最佳实践。

下面是示例的链接：https://codepen.io/leetech/pen/AJGLq

<ul class="slideshow">
<li><span>Image 01</span><div><h3>A little something something</h3></div></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
<div class="container">
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
</header>
</div>

.slideshow,
.slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.slideshow li div h3 {
font-family: "helvetica neue", helvetica;
text-transform: uppercase;
font-size: 80px;
padding: 0;
line-height: 200px;
color: rgba(255,255,255, 0.8);
}

你能告诉我更好的方法吗？

Answer 1

这不是一个关于最佳实践的问题，而是一个关于期望结果的问题。动画应仅应用于要进行动画处理的元素。仅当每个子项都包含在动画中时，才将动画添加到容器中。

我想在你的幻灯片的情况下会有分层的动画。将有幻灯片级动画，可以在容器级别应用，并在具有特殊处理的子元素上应用元素级动画。