2017-09-26 29 views
0

誰かがCSSジッタを取り除く方法を教えてくれますか?ここアニメーションの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%; }} 

フィドルは: https://jsfiddle.net/kybernaut/zkzod6wh/2/

私はこれとそれを読みましたが、私を助けていない:

答えて

1

非常に滑らかであるようtransformプロパティをアニメーション化することをお勧めします。 thisの例では、でbackground-sizeを変更しました。

@-webkit-keyframes wdszoom0 { 100% { transform: scale(1.1) }} 

スムーズアニメーションの詳細については、articleをご覧ください。

+0

ありがとう、私はそれをトランスフォームとして行うことを考えていませんでした;) –

+0

しかし、コンテンツの全体ではなくアイテムの背景にのみ適用したいのですが? –

+0

次に、アニメーション化できるラッパーがあると思って、コンテンツを残しておくといいでしょう。:) –

関連する問題