页面加载时的缓动效果

Question

我希望我的徽标在页面加载后具有以下饱和效果和缓出效果。这可能吗？或者它只适用于 "hover"？这是我的代码：

/* 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

当然可以，为什么不呢？

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

这里如何:

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

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

你可以看一下，当然如果你还有什么问题可以在这里回答你。

祝你好运，玩得开心。

Answer 2

我删除了特定于浏览器的前缀，但如果您只关心更现代的浏览器支持，则可以使用 CSS 动画。我还添加了一种随机颜色以显示它有效。

#logo h4 {
    filter: saturate(10%); 
    color: fuchsia; 
    animation: sat 7s ease-out 1;
    animation-fill-mode: forwards;
}

@keyframes sat {
    100% {
        filter: saturate(120%);    
    }
}

example pen

页面加载时的缓动效果

Ease effect when Page loaded

javascript

html

css

transition