Как сделать плавное появление картинки или простой эффект?

Question

[Влад Скляр]

Ввел на сайт скрипт, выдающий из базы данных картинки под нужным номером:

[js]
function showImg(forml) {
var catalog = '/resh/6klass/mat/vilenkin/',
ext = '.jpg',
error = document.getElementById('error'),
img = document.getElementById('img'),
value = parseInt(document.getElementById('input').value);
if (value && value < 1595) {
error.style.display = 'none';
img.src = catalog + value + ext;
img.style.display = 'inline';
}
else {
error.textContent = 'Некорректное значение, попробуйте снова! Вводите значения от 1 до 1594';
error.style.display = 'inline';
img.style.display = 'none';
}
}
[/js]
<output id="error" class="entries_error" style="display:none;"></output>
<div class="entries_reply"><input id="input" class="entries_number" onChange="showImg(forml)"><button class="entries_button" onclick="showImg();">Показать решение</button></div></div>
<center><img class="entries_answer" id="img" style="display:none;"></center>

Кто знает, каким образом сделать появление картинки плавным или с каким-либо простым эффектом, интересуют все вариант, как через CSS, так и с помощью скриптов, у кого на что смекалки хватит. Буду признателен за помощь. Так же буду благодарен, если кто-либо поможет оптимизировать исходный скрипт)

Answer 1

[Sali_cat]

Вот примеры, а так вам вот. Если лень искать то вот. Коротко и ясно:D

Comments

[Sali_cat]

это советую почитать и это будет не лишним

[Влад Скляр]

Я пробовал по CSS с использование :after, :before, transform, но все дело в том, что картинку вызывает скрипт и само появление происходит по инициативе скрипта, т.е. это не обычный hover и радуйся. Или я вас не понял(

[Влад Скляр]

Спасибо, сделал через animation

[Sali_cat]

@sklyarv Да нез.) на здоровье)