悬停时重置过渡

Question

我想在悬停DIV时重置移动功能。现在，它没有重置，而只是再次移动。对此主题的任何帮助都将是很多。

请参阅代码：

CSS

#box_1{
   border-radius:12px;
   display: block;
   position: relative !important;
   width: 204px;
   height: 203px;
   background:url(http://biready.visseninfinland.nl/wp-content/uploads/2014/01/input1.png);
   background-size:204px 203px;
   background-repeat:no-repeat;
}
#box_1 .hoverImg {
   position: absolute;
   left: 0; 
   top: 0;
   width: 204px;
   height: 203px;
   display: none;
}
#box_1:hover .hoverImg {
   display: block;
   width: 204px;
   height: 203px;
}
#axis1:hover .move-down {
   transform: translate(0,100px);
   -webkit-transform: translate(0,100px);
   -o-transform: translate(0,100px);
   -moz-transform: translate(0,100px);
}
.object1 {
   position: absolute;
   transition: all 5s ease-in;
   -webkit-transition: all 5s ease-in-out; /** Chrome & Safari **/
   -moz-transition: all 5s ease-in-out; /** Firefox **/
   -o-transition: all 5s ease-in-out; /** Opera **/
}
.object1 {
   position: absolute !important;
}
.line1 {
   top: 8%;
   left: 5%;
   width: 180px;
   height: 15px;
}
#box_1:hover .move-down {
   transform: translate(0,150px);
   -webkit-transform: translate(0,150px);
   -o-transform: translate(0,150px);
   -moz-transform: translate(0,150px);

}

html

<div id="box_1">
<div id="axis1"><img class="object1 line1 move-down" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/balkje1.gif"/></div>
<div class="hoverImg"><img src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/input2-80.png" width="204" height="203" alt=""></div>
</div>

请参阅小提琴：http：//jsfiddle.net/38m6u/

期待响应。

Answer 1

悬停在 #box_1的悬停时应进行过渡：

从.object1删除过渡，然后将其添加到选择器#box_1:hover .move-down

更新示例此处

#box_1:hover .move-down {
    transform: translate(0, 150px);
    -webkit-transform: translate(0, 150px);
    -o-transform: translate(0, 150px);
    -moz-transform: translate(0, 150px);
    transition: all 5s ease-in;
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
}