Анимация непрозрачности элемента при загрузке страницы с использованием CSS3

Question

Используя CSS 3, возможно ли анимировать непрозрачность элемента от 0 до 1, когда страница, содержащая этот элемент, была загружена?Возможно с задержкой от 1 до 2 секунд ...

Answer 1

CSS не имеет представления о событии загрузки.Вам следует взглянуть на эту комбинацию jQuery и CSS3 .

Или, поскольку вы все равно собираетесь добавить JS, почему бы не добавить к оживить все это в JS ?По моему мнению, это даст вам лучшее кросс-браузерное решение.

Answer 2

Вы можете использовать этот код:

$(function(){
                    $('#spe').hover(function(){

                        $(this).css("opacity","0.50");
                        $(this).animate({top:"80px"},500);
                    },function(){
                        $(this).css("opacity","0.3");
                        $(this).animate({top:"126px"},500);
                    });
                });

или вы можете использовать непрозрачность в методе анимации.

Answer 3

Как ответил сплиттер

Jquery имеет решение для управления непрозрачностью ........

Например

$("#mydiv").css({ opacity: 0.5 }); 

Приведенный выше код можно использовать для установки непрозрачности на 50% ..... (это Jquery)

или

Вы можете использовать свойство .fadeTo () (из jquery), чтобы включить прозрачность при событии загрузки страницы

Посетите http://api.jquery.com/category/effects/ для получения полной подробной информации ... Jquery довольно легко выучить