用 div 包裹元素后，元素的动画不起作用 [重复]答案

【问题标题】：Element's animation doesn't work after wrapping it with div [duplicate]用 div 包裹元素后，元素的动画不起作用 [重复]
【发布时间】：2021-04-27 18:31:48
【问题描述】：

HTML: 加载时的主要动画效果，cards:hover 上的动画也可以在没有 .div insidecard 的情况下工作。我需要这个 .insidecard 来包装元素，以确保最后一张卡片不会进入下一行并保持响应。

<div class="cards">
  <div class="showcards">Show Cards</div> 
    <div class="insidecard">
        <img class="insidecard01" src="img/cards/01.jpg">
        <img class="insidecard02" src="img/cards/03.jpg">
        <img class="insidecard03" src="img/cards/02.jpg">
    </div>
</div>

这里是 CSS。动画关键帧很好，所以我想不需要显示它们。

    .cards {
    overflow: hidden;
    }
    .insidecard {
      width: 600px;
      display: block;
    }
    .cards:hover > .insidecard02 {
      animation: cardsout02 0.6s linear;
    }
    .cards:hover > .insidecard03 {
      -webkit-animation: cardsout03 0.6s linear;
    }

【问题讨论】：

标签： html css css-animations keyframe

【解决方案1】：

由于结构发生了变化，现在您的图像元素不再是.cards 的子元素，因此请像这样更改CSS

.cards:hover .insidecard02 {
  animation: cardsout02 0.6s linear;
}
.cards:hover  .insidecard03 {
  -webkit-animation: cardsout03 0.6s linear;
}

删除子组合器>

【讨论】：

【解决方案2】：

你的 CSS 应该是这样的

.cards:hover > .insidecard > .insidecard02{
    // Your animation here
}

它选择了它的子类 insidecard 和一个子 insidecard02。 > 仅用于选择父级的子级，而不是其子级的子级。

你可以在这里阅读更多内容CSS Selector

【讨论】：