Question

我正在学习CSS3转换和转换，我在'Velodyne vTrue Forged Aluminium Performance Studio Headphones with 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

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

另外，您忘记了第31行中的webkit版本（不是指出它的错误）。

此外，它在这里工作，但过渡不是很顺利，那么你要求我们帮助你的是什么？

CSS3转换无法在Chrome和Firefox上运行

1 个答案: