谁能帮我解决 css 抖动问题?
此处为 HTML:
<div class="carousel-inner">
<div class="item">
</div>
</div>
此处的 CSS:
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.item {
background-image: url(https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=format&fit=crop&w=1500&h=989&q=80&cs=tinysrgb&crop=);
background-position: right bottom;
background-size: 100% 100%;
animation: wdszoom0 5s linear 0s infinite alternate;
position: absolute;
height: 100%;
width: 100%;
display: block;
top: 0;
bottom: 0;
overflow-x: hidden;
}
@-webkit-keyframes wdszoom0 { 100% { background-size: 120% 120%; }}
在这里 fiddle : https://jsfiddle.net/kybernaut/zkzod6wh/2/
我读过这个那个,但没有帮助我:
最佳答案
最好为 transform
属性设置动画,因为它更平滑。在 this示例 我使用 transform: scale
更改了 background-size
。
@-webkit-keyframes wdszoom0 { 100% { transform: scale(1.1) }}
您可以在 article 中阅读更多关于平滑动画的信息.
关于css - 摆脱动画上的 css 抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46420547/