CSS 封装时动画不播放

Question

我正在尝试将 link 添加到我的社交网络图标（请参阅此处的代码：https://codepen.io/denis-h-non/pen/ExjrgYP）所以我将我封装到一个中，但是当我这样做时 css延迟（下面的代码）不再起作用，所以它们同时出现。如果我删除标签，它会再次起作用，我该怎么办？提前致谢，

.container i:nth-of-type(1) {
  -webkit-transition-delay: 1.1s;
  transition-delay: 1.1s;
}

.container i:nth-of-type(2) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

Answer 1

由于您将图标放在锚点内，因此您需要这样更改 css：

.container a:nth-of-type(1) i {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.container a:nth-of-type(2) i {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

为什么？因为：

The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.

文档here.

CSS 封装时动画不播放

CSS Animation not playing when encapsulate

css

animation

transition