CSS3でhover時に別要素をアニメーション

by nekosmash

HTML

<div id="container">
    <div class="rect1">
        <div class="rect2">
            <div class="rect3"></div>    
        </div>
    </div>
</div>

CSS

#container{
    width:100px;
}

.rect1{
    background: #000;
    height:100px;
    width:100px;
}

.rect2{
    background: #333;
    height:100px;
    width:100px;
    -webkit-transition: margin-left ease-in 0.4s;
    -moz-transition: margin-left ease-in 0.4s;
    -o-transition: margin-left ease-in 0.4s;
    transition: margin-left ease-in 0.4s;
}

.rect3{
    background: #555;
    height:100px;
    width:100px;
    -webkit-transition: margin-left ease-in 0.4s;
    -moz-transition: margin-left ease-in 0.4s;
    -o-transition: margin-left ease-in 0.4s;
    transition: margin-left ease-in 0.4s;
}

.rect1:hover .rect2,
.rect1:hover .rect3{
margin-left:100px;
}