使用CSS在mouseout上縮放到原始大小

Question

我使用關鍵幀在mouseover上創建無限放大和縮小div。 正如你可以從下面的鏈接看到父框增加其大小，然後子div開始放大和縮小。 我希望在鼠標移出之前，父div會縮小，div div以平滑的方式返回到其常規尺寸。 現在，正如你所看到的，它會突然恢復到原來的尺寸，沒有任何平滑度。

我的關鍵幀：

@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); } 
} 

孩子的div風格：

#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%; 
} 

我演示鏈接：http://emanuelezenoni.com/dev/test/

非常感謝！

Answer 1

你不需要animation來實現你想要的。 A transition當您將鼠標懸停在article上時適用。看到我下面的轉換的基本例子。

做些什麼：

transition: transform 1s ease-in-out; 

這將會把一個過渡的財產transform用於1s與緩解ease-in-out。當您將鼠標懸停在.box上時，transform: scale(1.25);將會運行，因爲我們表示已對其應用了一個轉換。 overflow: hidden;確保內容不會大於它所在的框。

您可以根據需要調整設置。

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>