Задача такая: Надо что бы черный квадрат(logo) выезжал слева из контейнера и вставал по середине при наведении на контейнер.
Сделал такой код, но почему то он перемещается не плавно, как планировалось, а резко. В чем ошибка?
#container{
border:2px #333333 solid;
height: 200px;
width:400px;
overflow:hidden;
}
#logo{
width:40px;
height:40px;
margin-left:-50px;
background:#000;
}
#container:hover #logo{
transform:translateX(100px);
width:40px;
height:40px;
background:#000;
transform:all 500ms ease-in-out;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
</div>
</div>
</body>
