Question

我希望li逐渐向右滑动100px。我的CSS翻译即时工作，但动画不是。谁能解释为什么？ JSFiddle：http://jsfiddle.net/Lux4t/1/

<ul>
    <li class="ease"><a href="">Ease</a></li>
</ul>

这是我的CSS

li{
list-style: none;
margin-bottom:20px;
float:left;
clear: both;
}
li a{
color:white;
background-color:blue;
display:block;
height:100px;
width:200px;
transition-property:-webkit-transform;
}
li.ease a{
transition-timing-function: ease;
}
li:hover a{
-webkit-transform:translateX(100px);
background-color: red;
}

Answer 1

transition-property是transition（简写）的一部分。 transition-property还需要transition-duration才能运作。请改用transition，更容易编写

<强> CSS

li a {
    color:white;
    background-color:blue;
    display:block;
    height:100px;
    width:200px;
    transition:-webkit-transform 1s;
}

请参阅here

Answer 2

解决了问题：需要将transition-duration:3s;添加到我的li a css！

-Webkit-transform翻译不动画

2 个答案: