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不允许您编写前瞻性表达式，因此除了更改文档结构之外，您没有其他选择。

解决问题的一种方法是：

将info-container div更改为：
<div class="info-container fadeIn iPad" id="info-container">

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

或者只是从该div中删除fadeIn。

您还可以将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>

无法应用：not（）包含div容器

1 个答案: