我的 CSS 过渡只在 Firefox 中有效……不知道为什么它在 chrome、safari 或 Opera 中没有动画效果。
这是一个小提琴：http: //jsfiddle.net/chovy/HUDuy/
HTML：
<ol class="steps">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>
CSS：
ol.steps {
list-style-type: none;
counter-reset: step-counter;
padding-left: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ol.steps li {
position: relative;
padding: 10px 20px;
height: 50px;
}
ol.steps li:before {
content: counter(step-counter, decimal);
counter-increment: step-counter;
position: absolute;
left: -50px;
top: 10px;
border: 1px solid #ccc;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50px;
background: #f9f9f9;
text-align: center;
font-size: 28px;
color: #aaa;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
ol.steps li:hover:before {
width: 60px;
height: 60px;
line-height: 60px;
left: -57px;
top: 2px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}