html - 无法申请 :not() to include div containers

Question

我正在尝试淡化屏幕上除图像以外的所有内容。我希望图像 transform: scales(); 变大而不是回到原始大小。我有两个容器框，其中包含一些文本和一个表单，我希望它们在图像之后全部淡入。

我可以让图像制作动画，然后其他所有内容都淡入，但 div 容器本身不会制作动画。所以屏幕上会出现两个空框，图像会动画，然后 div 的内容会淡入。

这是我的代码:

.fadeIn :not(#ipad) {
  -webkit-animation: fadeIn 3s ease;
  -moz-animation: fadeIn 3s ease;
  -ms-animation: fadeIn 3s ease;
  -o-animation: fadeIn 3s ease;
  animation: fadeIn 3s ease;
}

<div class="title fadeIn" id="title"><b>Curriculum and Instruction iPad Setup</b></div>
<div class="info-container fadeIn" id="info-container">
  <img src="img/IPad_3.png" id="ipad">
  <form action="login_complete.php" method="post" id="loginForm">
    <div class="campus-container">
      <input type="radio" name="campus" value="STE" /><span><b>Stephenville</b></span>
      <input type="radio" name="campus" value="FTW" /><span><b>Fort Worth</b></span>
    </div>
    <input type="submit" value="Submit" onclick="loadingSpinner();" />
  </form>
</div>

当我取下 :not(#ipad) 时，包括图像在内的所有内容都会一起淡入。我希望图像不会在动画中淡入淡出。

我看了here但这似乎没有用。我还找到了this但也不行。

已编辑:

抱歉没有足够的CSS代码:

淡入

@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

图像动画

@keyframes zoomOut {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
        -ms-transform: scale(5);
        -o-transform: scale(5);
        transform: scale(5);
    }
    100% { }
}

Answer 1

如果你嵌套<img src="img/IPad_3.png" id="ipad">
里面<div class="info-container fadeIn" id="info-container">
你不应该期望它会起作用。

这就是全部。您必须重新考虑您的文档结构。

此外，css 不允许您编写前瞻表达式，因此您别无选择，只能更改文档结构。

---

修复它的一种方法是:

将信息容器 div 更改为:
<div class="info-container fadeIn iPad" id="info-container">

并从 .fadeIn :not(#ipad) 更改 css至 .fadeIn:not(.iPad)

或者只是删除 fadeIn来自那个 div。

---

您还可以将您的 css 选择器更改为:.fadeIn {

并将您的 html 更改为:

<div class="title fadeIn" id="title"><b>Curriculum and Instruction iPad Setup</b></div>
<div class="info-container" id="info-container">
  <img src="img/IPad_3.png" id="ipad">
  <form action="login_complete.php" class="fadeIn" method="post" id="loginForm">
    <div class="campus-container">
      <input type="radio" name="campus" value="STE" /><span><b>Stephenville</b></span>
      <input type="radio" name="campus" value="FTW" /><span><b>Fort Worth</b></span>
    </div>
    <input type="submit" value="Submit" onclick="loadingSpinner();" />
  </form>
</div>