Я знаю, это может звучать как основной вопрос, но правда в том, что я не эксперт в анимации, и сложно вычислить математику от x и y. Итак, я хотел бы знать, как заставить div «gl_banner» просто проскочить через 0,5-1 секунды (ы) и исчезнуть, а содержимое под ним будет вытолкнуто в исходное положение. Какие свойства css я использую? CSS-анимация? переход? Как мне это сделать?Как сделать анимацию div div и исчезнуть?
P.S. Я провел некоторое исследование анимации, и я увидел много анимаций, продвинутых анимаций, но не смог найти простую анимацию слайдов. Немного помощи приветствуется! Благодаря!
HTML КОД:
<div id="gl_banner" style="display:none; visibility:hidden;">Good Luck! :)</div>
<form id="quiz" action="grade.php" method="post" style="visibility:hidden;">
<!--Question 1-->
<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>
<!--Question 2-->
<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>
<!--Question 3-->
<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>
<!--Question 4-->
<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>
<!--Question 5-->
<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>
JavaScript код:
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';
}
я ничего не знаю о JQuery я просто требуется простой код javascript без использования библиотек. – TheAmazingKnight
Просто добавьте этот скрипт, включите строку в пределах
сек. и следуйте строгому синтаксису. Очень просто ! –Просто прочитав его, он делает то же самое, что и мой javascript-код. То, что я хочу изменить, теперь - это div «gl_banner», чтобы ускорить анимацию и исчезнуть, вот и все. – TheAmazingKnight