CSS3转换不适用于Chrome和Firefox

Question

I'm learning CSS3 Transform and Transition and I added translateY(-40px) on text of 'Velodyne vTrue Forged Aluminum Performance Studio Headphones w/ Leather (Refurb) $80 + Free Shipping' but this gonna move back to start point if I hover a mouse point on the box. This problem on Chrome and Firefox. (style name '.area:hover desc') I uploaded sample code to http://jsfiddle.net/tza1515g

Please answer me what I wrong.

<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

When you are using the webkit version of the CSS rule, for example in line 26 , use -webkit-transition in the property to undergo transition instead of simply transform.

Also, you forgot the webkit version in line 31 (not an error just pointing it out).

Also, it is working here, but the transition is not very smooth, so is that what you are asking us to help you with?