0

希望有人可以帮助我：

我正在开发一个单页布局网站，其中包含一些关键帧动画和几个固定的背景图像，这些图像在您向下滚动时会覆盖。

奇怪（或不奇怪），我无法管理背景附件：固定与关键帧动画一起使用：

 <style>
.container{with:300px; height:400px}

.scaleAnimation {
    width:300px;
    height:300px;
    background-color:blue;
    -webkit-animation: scale 6s ease 3 normal;
    background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
    margin-bottom:20px;
}
.mask {
    background-attachment:fixed;
    position:relative;
    width:400px;
    height:300px
}
.mask1 {
    background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/1.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
.mask2 {
    background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/2.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
@-webkit-keyframes scale {
    from {
        -webkit-transform: scale(1.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
</style>

<div id="wrapper">
    <div class="container">
        <div class="scaleAnimation"></div>
    </div>
    <div class="container">
        <div class="mask mask1"></div>
        <div class="mask mask2"></div>
    </div>
</div>

示例：http: //jsfiddle.net/fpuLR/2/

如果我删除动画，背景附件工作正常：

.scaleAnimation {
    width:300px;
    height:300px;
    background-color:blue;
    -webkit-animation: scale 6s ease 3 normal;
    background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
    margin-bottom:20px;
}

示例：http: //jsfiddle.net/fpuLR/3/

知道为什么会这样吗？

提前致谢， Ku4ttro

4

1 回答 1

0

这不是最优雅的解决方案，但是当我遇到与您相同的问题时，这是我想出的-对不起，已经晚了几个月，您可能从未解决此问题，但是没有得到解决，所以我想我至少会搏一搏。

据我所知，使用 CSS 动画/关键帧时，固定元素会“损坏”。我尝试将相同的动画/关键帧（因为我使用的是关键帧）应用到我遇到问题的 div - 并且固定定位有效！然而，它似乎只是在应用相同的动画时保持它的固定位置。

在我的情况下，当页面加载时我正在淡入图像，所以我使用了这个：

.fadeIn-Delay-2s {
    -webkit-animation-delay:2s;
    -moz-animation-delay:2s;
    -o-animation-delay:2s;
    animation-delay:2s;
}

.fadeIn-3s {
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    animation-duration:3s;
}

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

我的解决方案是对其应用相同的动画，但将持续时间设为 0.01 秒。它为我解决了这个问题，直到我找到不同的东西或找到一个 jquery/javascript 解决方案，它提供了与 CSS 动画提供的相同的平滑度，我坚持这一点。

于 2013-09-24T08:24:52.400 回答