Question

希望有人可以帮助我：

我正在制作一个单页布局网站，其中包含一些关键帧动画和一些固定的背景图像，当您向下滚动时，这些图像会重叠。

奇怪（或没有），我无法管理背景附件：修复以使用关键帧动画：

 <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

Answer 1

这不是最优雅的解决方案，但是当我遇到与你相同的问题时，这是我想到的 - 对不起它已经很晚了几个月，你可能从来没有得到这个问题，但是这个没有答案所以我认为我d至少试一试。

据我所知，当使用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秒。它解决了我的问题，直到我找出不同的东西或找到一个提供与CSS动画相同的平滑度的jquery / javascript解决方案，我坚持这一点。

关键帧动画和背景附件：在webkit上修复了问题

1 个答案: