Yumuşatma arka plan ölçeği css3 CSS animasyonları ve dönüşümleri kullanarak bir arka plan resmi Büyütmek uygulamaya çalışıyorsunuz

Question

dönüşümü ama biraz laggy çalışıyor görünüyor: Bu konuda yapabileceğiniz bir şey

Reproduction online

var mı?

@keyframes animateBg { 
    from { 
    -ms-transform: scale(1,1); 
    transform: scale(1,1); 
    visibility: visible; 
    } 

    to { 
    -ms-transform: scale(1.45, 1.45); 
    transform: scale(1.45, 1.45); 
    } 
} 
.animate-bg{ 
    -webkit-animation-name: animateBg; 
    animation-name: animateBg; 

} 
.animate{ 
    -webkit-animation-duration: 5000ms; 
    animation-duration: 5000ms; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 

    -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1); 
    timing-function: cubic-bezier(.3,0,.7,1); 
} 

.bg{ 
    background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg); 
    height: 100%; 
    width: 100%; 
    display: block; 
    position:absolute; 
    z-index: -1; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    background-position: center; 
    background-size: cover; 
} 

Answer 1

En azından Chrome'da bir translateZ ekleyerek çok daha

pürüzsüz

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
    overflow:hidden; 
 
} 
 
.bg{ 
 
    background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg); 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position:absolute; 
 
    z-index: -1; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    background-position: center; 
 
    background-size: cover; 
 
} 
 

 
.animate-bg{ 
 
    -webkit-animation-name: animateBg; 
 
    animation-name: animateBg; 
 

 
} 
 
.animate{ 
 
    -webkit-animation-duration: 5000ms; 
 
    animation-duration: 5000ms; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 

 
    -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1); 
 
    animation-timing-function: cubic-bezier(.3,0,.7,1); 
 
    animation-iteration-count: infinite; 
 
} 
 

 
    
 

 
@keyframes animateBg { 
 
    from { 
 
    -ms-transform: scale(1,1); 
 
    transform: scale(1,1) translateZ(1px); 
 
    } 
 

 
    to { 
 
    -ms-transform: scale(1.45, 1.45); 
 
    transform: scale(1.45, 1.45) translateZ(1px); 
 
    } 
 
}

<div class="bg animate animate-bg"> 
 

 
</div>