CSS

Question

kullanarak mouseout üzerinde orijinal boyuta kadar ölçeklendirin Rasgele bir ölçek oluşturmak ve fare üzerinde farenin küçültmek için ana kareleri kullanıyorum. Ebeveyn kutusunun altındaki bağlantıdan görebileceğiniz gibi, boyutlarını arttırın ve daha sonra alt öğe yukarı ve aşağı ölçeklenmeye başlar. Bunun için farenin dışına çıkmadan önce, ebeveyn div aşağı ölçeklenmeden önce, çocuk div normal boyutlarına düzgün bir şekilde geri döner. Şimdi, görebildiğiniz gibi, herhangi bir pürüzsüzlük olmadan, aniden orijinal boyutlara geri dönüyor.

Benim ana kareler:

@keyframes imageZoom { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.24); } 
    100% { transform: scale(1);} 
} 

@-moz-keyframes imageZoom { 
    0% { -moz-transform: scale(1);} 
    50% { -moz-transform: scale(1.24); } 
    100% { -moz-transform: scale(1); } 
} 

@-webkit-keyframes imageZoom { 
    0% { -webkit-transform: scale(1); } 
    50% {-webkit-transform: scale(1.24); } 
    100% { -webkit-transform: scale(1); } 
} 

@-ms-keyframes imageZoom { 
    0% { -ms-transform: scale(1); } 
    50% { -ms-transform: scale(1.24); } 
    100% { -ms-transform: scale(1); } 
} 

çocuk div stilleri:

#myFeaturedItems:hover article { 
    animation: imageZoom linear 50s; 
    animation-iteration-count: infinite; 
    -webkit-animation: imageZoom linear 50s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 1.5s; 
    animation-delay: 1.5s; 
} 

#myFeaturedItems article { 
    background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc'); 
    background-position: center center; 
    background-size: cover; 
    display: block; 
    height: 100%; 
    width: 100%; 
} 

Benim demo linki: http://emanuelezenoni.com/dev/test/

Çok teşekkürler!

Answer 1

İstediğinizi elde etmek için animation'a ihtiyacınız yoktur., article'un üzerine geldiğinizde uygundur. Aşağıda, buradaki geçişin en temel örneğini görün.

İşlevi:

transition: transform 1s ease-in-out; 

Bu ease-in-out hafifletilmesi ile 1s için mülkiyet transform üzerinde bir geçiş koyacağız. .box'un üzerine geldiğinizde, transform: scale(1.25); çalışır, çünkü geçişin üzerine uygulandığını söyledik. overflow: hidden;, içeriğin içeridekinden daha büyük olmayacağından emin olur.

Ayarlarla ihtiyaçlarınıza göre ayar yapabilirsiniz.

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.box { 
 
    margin-left: 50%; 
 
    width: 50%; 
 
    min-height: 100%; 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    -webkit-transition: -webkit-transform 1s ease-in-out; 
 
    transition: transform 1s ease-in-out; 
 
} 
 

 
.box:hover { 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
}

<div class="container"> 
 

 
    <article class="box"> 
 

 
    </article> 
 

 
</div>