javascript - 页面加载时的缓动效果

Question

我希望我的 Logo 在页面加载后具有以下饱和效果和缓出效果。这可能吗？或者它只适用于“悬停”？这是我的代码:

/* CSS*/
     #logo {
        -moz-transition: all 7s ease-out;  
        -o-transition: all 7s ease-out;  
        -webkit-transition: all 7s ease-out;  
        -ms-transition: all 7s ease-out;  
        transition: all 7s ease-out;
        filter: saturate(120%);
        -webkit-filter: saturate(120%);
        -moz-filter: saturate(120%);
        -o-filter: saturate(120%);
        -ms-filter: saturate(120%);
        cursor:default;

        }


     /* HTML */
 <div id="logo">
        <h4>MyLogo</h4>
        </div>

Answer 1

当然可以，为什么不呢？

例如，我们将对您的 Logo 进行一些边距更改。 我们将默认的 margin-top 设置为 -50px，这样 Logo 就不会显示在页面上，然后当页面完全加载时，我们将使用 jQuery 向 Logo DOM 添加一个类。

这里如何:

$(document).on("ready", function () {
    $("#logo").addClass("trans");
});

这是完整的 fiddle :http://jsfiddle.net/c2d4xv13/

你可以看看它，当然如果你有任何进一步的问题，我们会在这里回答你。

祝你好运，玩得开心。