Can't apply :not() to include div containers

Question

I am trying to fade in everything on the screen except an image. I want the image to transform: scales(); bigger and than back down to original size.I have two container boxes that have some text and a form that I want to all fade in after the image.

I can get the image to animate and then everything else fade in but the div containers themselves do not animate. So there will be two empty boxes on the screen, the image animates and then the contents of the div fade in.

Here is my code:

.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>

When I take off :not(#ipad) everything, including the image, fades in together. I want the image to not get the fade in animation.

I looked here but that didn't seem to work. I also found this but also no go.

EDITED:

Sorry about not enough css code:

the fade in

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

image animation

@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% { }
}

If #Ipad is hidden at first it will indeed not show up. you need to adrees a specified style to it to be shown from the beginning .... if i understood the problem. **You did not share enough CSS to actually demonstrate your issue** ... this comment is then a guess. Please add the missing CSS to your snippet to actually show your trouble :) — G-Cyrillus, Oct 20 '17 at 19:05
You have only shown us the name of your animation, but not which properties it actually animates. I'm guessing that you're animating opacity? Then what you want is not possible using this structure, you can not "reverse" opacity for descendant elements, see https://stackoverflow.com/q/19457057/1427878 — CBroe, Oct 20 '17 at 19:07
#ipad is not hidden at all. It just seems to follow along with the parent container and I wanted to know if there was a way to make it separate from the parent container. — cnelson, Oct 20 '17 at 19:48

GottZ · Accepted Answer · 2017-10-20T19:39:51.733

0

if you nest <img src="img/IPad_3.png" id="ipad">
inside <div class="info-container fadeIn" id="info-container">
you should not expect it to work.

that's all it takes. you have to rethink your document structure.

besides, css does not allow you to write look ahead expressions so you don't have any other choice but to change the document structure.

one way to fix it would be this:

change the info-container div to this:
<div class="info-container fadeIn iPad" id="info-container">

and change css from .fadeIn :not(#ipad) to .fadeIn:not(.iPad)

or alternatively just remove fadeIn from that div.

you could also change your css selector to this: .fadeIn {

and change your html to this:

<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>

edited Oct 20 '17 at 19:39

answered Oct 20 '17 at 19:02

GottZ

4,824
1
36
46

thats because it did not change except the selector… – GottZ Oct 20 '17 at 19:39
Oh sorry. If I remove the `fadeIn` from `#info-container` then the rest of the container won't animate. I want everything except the image to animate. – cnelson Oct 20 '17 at 19:51
as i said. that's impossible unless you move the image out of that .fadeIn div – GottZ Oct 20 '17 at 19:52
with impossible i mean impossible as in total world domination by my cat. – GottZ Oct 20 '17 at 19:53
No not the cat! Ok that makes sense. Thank you for your help. @GottZ – cnelson Oct 20 '17 at 19:54
I'm just a noob and am learning as I go. But after removing from the parent div, it works. Thanks again for everyone that took time out to help. – cnelson Oct 20 '17 at 20:06

Can't apply :not() to include div containers

1 Answers1