は、どのように私は2枚の画像、及び1つのバックグラウンドを持っているCSSアニメーション

Question

を作ることができます最初または2番目の画像は左右にスライドします。店内のドアのように。両方同時にスライドする（1つだけではない）。

誰かが私を助けることができますか？ありがとう。

Answer 1

あなたは中央の上にカーソルを置くと、それは、前後両側をバウンスし、開かない場合、私は受け入れ答えをしようとしたが、それは（より多くのようにFirefoxで）ビットバギーです。個人的に私はこれ以上のことをしています。あなたが働いていないことを試してみましたがどのようなコーディング

CODEPEN TO PLAY WITH

#stage { 
 
    width: 20rem; 
 
    height: 15rem; 
 
    background: green; 
 
    border: black 1px solid; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    cursor: pointer; 
 
} 
 

 
span { 
 
    color: white; 
 
    font-size: 150%; 
 
} 
 

 
#left-curtain, #right-curtain { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10rem; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
#left-curtain { 
 
    background: red; 
 
    left: 0; 
 
} 
 

 
#right-curtain { 
 
    background: blue; 
 
    right: 0; 
 
} 
 

 
#stage:hover #left-curtain { 
 
    left: -10rem; 
 
} 
 

 
#stage:hover #right-curtain { 
 
    right: -10rem; 
 
}

<div id="stage"> 
 
    <span>PEEK - A - BOO!</span> 
 
    <div id="left-curtain">Mouse</div> 
 
    <div id="right-curtain">Over</div> 
 
</div>

Answer 2

ここに私のすばやく、汚れた解決策があります。それは完璧ではないし、おそらく他の誰かが微調整することができます - しかしそれは動作します。 Javascript/jQueryを使用すると、より完全なソリューションを考え出すことができます。

これが役に立ちます。

.l, 
 
.r { 
 
    -webkit-transition: width .35s ease-in-out; 
 
    transition: width .35s ease-in-out; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
} 
 

 
.l { 
 
    background-color: red; 
 
    float: left; 
 
} 
 

 
.r { 
 
    background-color: brown; 
 
    float: right; 
 
} 
 

 
.container:hover div { 
 
    width: 150px; 
 
}

<div class='container'> 
 
    <div class='l'> 
 
    </div> 
 
    <div class='r'> 
 
    </div> 
 
</div>