StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I make a div animation slide up and disappear?
text
Body
copied!<p>I know this may sound like a basic question but the truth is I'm not that of an expert with animations and it's hard to calculate the math from x and y. So, I would like to know how to make the "gl_banner" div simply slide up after a 0.5-1 second(s) and disappear and the content below it will be pushed up to its original position. What css properties do I use? css-animation? transition? How do I do it?</p> <p>P.S. I did some research on animations and I saw a lot of animations, advanced animations but couldn't find a simple slide up animation. A little help is appreciated! Thanks!</p> <p><strong>HTML CODE:</strong></p> <pre><code><div id="gl_banner" style="display:none; visibility:hidden;">Good Luck! :)</div> <form id="quiz" action="grade.php" method="post" style="visibility:hidden;">  <h3>1. How many percent of modern camera phones use CMOS?</h3> <div> <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" /> <label for="question-1-answers-A">A) 20%</label> <br/> <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" /> <label for="question-1-answers-B">B) 80%</label> <br/> <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" /> <label for="question-1-answers-C">C) 50%</label> <br/> <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" /> <label for="question-1-answers-D">D) 90%</label> </div>  <h3>2. Which type of camera setting(s) is best for greater control and flexibility in terms of focusing on a subject?</h3> <div> <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" /> <label for="question-2-answers-A">A) Manual Focus</label> <br/> <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" /> <label for="question-2-answers-B">B) Auto Focus</label> <br/> <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" /> <label for="question-2-answers-C">C) Both A and B</label> <br/> <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" /> <label for="question-2-answers-D">D) Neither</label> </div>  <h3>3. What are the three properties included in an exposure triangle?</h3> <div> <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" /> <label for="question-3-answers-A">A) White Balance, ISO, Low Light</label> <br/> <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" /> <label for="question-3-answers-B">B) Shutter Speed, Exposure, ISO</label> <br/> <input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" /> <label for="question-3-answers-C">C) Aperture, ISO, Exposure</label> <br/> <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" /> <label for="question-3-answers-D">D) ISO, Aperture, Shutter Speed</label> </div>  <h3>4. The higher the ISO, the more noise it produces in an image.</h3> <div> <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" /> <label for="question-4-answers-A">A) True</label> <br/> <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" /> <label for="question-4-answers-B">B) False</label> </div>  <h3>5. What is the name of the smartphone you've seen all over this site?</h3> <div> <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" /> <label for="question-5-answers-A">A) Nokia Pureview 808</label> <br/> <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" /> <label for="question-5-answers-B">B) Nokia Lumia 1020</label> <br/> <input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" /> <label for="question-5-answers-C">C) Nokia Lumia 925</label> <br/> <input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" /> <label for="question-5-answers-D">D) Nokia Lumia 920</label> </div> <br /> <hr style="border-top:1px; border-style:solid; border-color: #000;" /> <input style="cursor:pointer;" type="submit" value="Submit Quiz" /> </form> </code></pre> <p><strong>JavaScript Code:</strong></p> <pre><code>function takeQuiz() { // hide the intro document.getElementById('intro').style.display = 'none'; // display the quiz document.getElementById('quiz').style.visibility = 'visible'; document.getElementById('gl_banner').style.display = 'block'; document.getElementById('gl_banner').style.visibility = 'visible'; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload