CSSを使用してmouseoutで元のサイズに縮尺を変更

Question

私は、キーフレームを使用してマウスオーバー時に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は必要ありません。 articleにカーソルを合わせるとtransitionが適切です。下の移行の私の非常に基本的な例を見てください。

それは何：

transition: transform 1s ease-in-out; 

これはease-in-outを緩和して1sのプロパティtransformにトランジションを配置します。 .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>