尝试在短像素距离内平滑地为 div's
背景图像 #bg2
设置动画(同时剪辑路径在其上设置动画)。我无法让图像平滑移动,它会抖动和颤抖。剪辑路径动画很好。
我尝试了另一个 SO 线程中建议的不同缓动(linear
/ ease-in-out
等),并且还扩展了它需要移动的距离,但它似乎仍然逐个像素地跳跃(排序的),而不是平稳移动。 (尽管在实际用例中延长移动距离不是一个选项)。
如何实现猫背景图片#bg2
的平滑移动?谢谢。
** 编辑:在 Firefox 中对我来说完全流畅,在 Mojave 10.14.6 上的 Chrome 91.0.4472.114 中很紧张,而在 Safari 中则不那么紧张。对于其他人,它在 Chrome 上似乎也很流畅。嗯……
var clickTag = "#";
#main-container {
position: absolute;
width: 970px;
height: 250px;
left:-200px;
box-sizing: border-box;
background: #333;
overflow:hidden; perspective: 800px;
border:1px solid #ccc;
}
div, img {
position: absolute;
background-repeat:no-repeat;
width: 970px;
height: 250px;
z-index: 4;
background-size: 970px 250px;
}
#bg2{
width: 970px;
height: 250px;
z-index:2;
background-image:url('https://i.stack.imgur.com/6EcDu.jpg');
-webkit-clip-path: circle(9% at 682px 110px);
clip-path: circle(9% at 682px 110px);
transform: translateY(20px);
background-position: -5px -10px;
}
#bg2{animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;-webkit-animation: groww 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;}
@-webkit-keyframes groww {
0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);-webkit-clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);-webkit-clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
@keyframes grow {
0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container" class="animate">
<div id="bg2"></div>
</div>
</a>
答案 0 :(得分:1)
我有点好奇为什么有一个大横幅而不显示所有内容。
无论如何,我提供了另一种动画方式,基本上只是改变高度。希望这可以提供一些想法。
我删除了宽度以使其响应更快。
此解决方案中的动画有些紧张,但我想这取决于您的贝塞尔曲线。所以也许这就是一直以来的问题?
var clickTag = "#";
#main-container {
position: relative;
height: 250px;
box-sizing: border-box;
border: 1px solid #ccc;
background-color: #333;
}
#bg2 {
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%, -50%);
height: 40%;
aspect-ratio: 1;
border-radius: 50%;
background-image: url('https://i.stack.imgur.com/6EcDu.jpg');
background-position: right 25% center;
animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes grow {
to { height: 80%; }
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container">
<div id="bg2"></div>
</div>
</a>