Question

最终我想要实现的目标如下：

在页面加载时（更具体地说，在背景图像加载时）我希望背景图像淡入。
其次是徽标。
其次是导航。
跟随缩略图，一个接着一个。
缩略图必须保持不透明度：1;这样他们就会减少到不透明度：0.5;像侧面导航中的按钮一样悬停。
我不介意在页面加载期间使用某种图形。如何做到这一点？动画gif？为了让它在页面加载时消失，如何放置它？

见这里：http://benner-design.com/test/brentwood1.html

我是css动画的新手，很想学习如何为我当前的项目做这件事。非常感谢您提供的任何帮助。这是我的css：

@charset "UTF-8";
/* CSS Document */

.fade_item{
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;

    /*for hover transition */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.fade_item_bkg{
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

.fade_item:hover{
    opacity:0.5;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

如何使用CSS动画错开Fade Ins？

0 个答案: