CSS3 转换不适用于 Chrome 和 Firefox

Question

我正在学习 CSS3 变换和过渡，我在“Velodyne vTrue Forged Aluminum Performance Studio Headphones w/ Leather (Refurb) 80 美元 + 免费送货”的文本上添加了 translateY(-40px) 但这将回到起点，如果我将鼠标点悬停在盒子上。 Chrome 和 Firefox 上的这个问题。 （样式名称'.area:hover 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 版本（不是指出错误）。

此外，它在这里工作，但过渡不是很顺利，所以你要求我们帮助你吗？