gpt4 book ai didi

html - 关键帧动画和背景附件 : fixed issue on webkit

转载 作者:行者123 更新时间:2023-11-28 12:59:44 24 4
gpt4 key购买 nike

希望有人能帮我解决这个问题:

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

奇怪的是(或不是),我无法管理背景附件:已修复以使用关键帧动画:

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

知道为什么会这样吗?

提前致谢,库特罗

最佳答案

这不是最优雅的解决方案,但这是我在遇到与您相同的问题时想到的 - 抱歉,已经晚了几个月,您可能从来没有解决过这个问题,但这个问题没有得到解答,所以我想我' 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 秒。它为我解决了这个问题,直到我找到不同的东西或找到一个 jquery/javascript 解决方案来提供与 CSS 动画提供的相同平滑度,我会坚持这个。

关于html - 关键帧动画和背景附件 : fixed issue on webkit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16243586/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com