CSS3转换不工作在Chrome和Firefox

Question

我正在学习CSS3变换和过渡，我在"Velodyne vTrue Forged Aluminum Performance Studio耳机w/Leather (Refurb) $80 +免费运费"的文本上添加了translateY(-40px)，但如果我将鼠标点停留在盒子上，这将移回起点。在Chrome和Firefox上出现此问题。(样式名称)。面积:悬停desc)我将示例代码上传到http://jsfiddle.net/tza1515g

请回答我错在哪里。

<style>
.area {
    width: 200px;
    float: left;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 20px;
    text-align: center;
    height: 230px;
    transition: background 0.3s;
    background: #333;
    color: #fff;
}
.area:hover {
    background: #0CF;
}
.icon {
    width: 50px;
    transition: transform 0.3s cubic-bezier(0, 0, 0, 2);
    transform: scale(1.5);
    -webkit-transition: transform 0.3s cubic-bezier(0, 0, 0, 2);
    -webkit-transform: scale(1.5);
    color: #fff;
}
.area:hover .icon {
    transform: scale(1);
}
.area h2 {
    font-weight: 700;
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0, 0, 0, 2);
    -webkit-transition: transform 0.3s cubic-bezier(0, 0, 0, 2);
}
.area:hover h2 {
    transform: scale(0.8) translateY(-25px);
    -webkit-transform: scale(0.8) translateY(-25px);
}
.desc {
    opacity: 0;
    color: #fff;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}
.area:hover .desc {
    opacity: 1;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
}
</style>
<figure class="area">
    <img class="icon" src="data:image/png;base64,"/>
    <figcaption>
        <h2>Standard Management</h2>
        <span class="desc">
            Velodyne vTrue Forged Aluminum Performance Studio Headphones w/ Leather (Refurb) $80 + Free Shipping
        </span>
    </figcaption>
</figure>

Answer 1

当你使用webkit版本的CSS规则时，例如在第26行，在属性中使用-webkit-transition来进行过渡，而不是简单地转换。

还有，你忘记了在第31行中的webkit版本(只是指出它不是错误)。

同样，它在这里工作，但过渡不是很顺利，所以这是你要求我们帮助你的吗?