如果你想只向一移的话，你需要修改translate
-webkit-transform:translateY(100px)-moz-transform:translateY(100px)
这样才是向下移动100px，
因为translate
默认是移动XY轴的，意思就是说，移动左右以及上下一起，但是默认平移而已，
如果你想单独操作Y的话，就要translateY，单独操作X用translateX，当然默认translate
(100px)相当于translateX(100px)
如果你想向右移的同时又向下移
-webkit-transform:translate(100px,100px)-moz-transform:translate(100px,100px)
这样你应该能理解translate的用法 了。。。
有动画效果的是css3的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused，继续动画是animation-play-state:running （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。
给你写个例子：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title>动画暂停</title>
<style type="text/css">
@keyframes move
{
from {
transform: rotate(0deg)
left: 0
}
to {
transform: rotate(360deg)
left: 600px
}
}
@-webkit-keyframes move
{
from {
-webkit-transform: rotate(0deg)
left: 0
}
to {
-webkit-transform: rotate(360deg)
left: 600px
}
}
@-zos-keyframes move
{
from {
-zos-transform: rotate(0deg)
left: 0
}
to {
-zos-transform: rotate(360deg)
left: 600px
}
}
@-o-keyframes move
{
from {
-o-transform: rotate(0deg)
left: 0
}
to {
-o-transform: rotate(360deg)
left: 600px
}
}
.box {
animation: move 3s alternate infinite
-webkit-animation: move 3s alternate infinite /* Safari 和 Chrome */
-moz-animation: move 3s alternate infinite /* Firefox */
-o-animation: move 3s alternate infinite /* Opera */
position: absolute
background-color: yellow
width: 100px
height: 100px
}
.box:hover {
-webkit-animation-play-state: paused
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
.hc_hot ul li:hover {margin-left: -10px
}
鼠标移上.hc_hot ul li对应的元素后，触发hover状态，应用上面这条css，左边距变为-10px，达到向左移动的目的
