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

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

Answer 1

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>