过渡 - 无法获得旋转和更改边距顶部值的跨度

Question

我正在尝试使跨度旋转 90° 并在悬停时更改边距顶部，但失败了。

跨度会旋转，但不会更改其顶部边距。

HTML

<div class="cheersWrapper">
    <span class="cheers">
        <h1>Hi!</h1>
    </span>
    <span class="smile">
        <h1>  :)</h1>
    </span>
</div>

CSS

.cheersWrapper{
    -webkit-transition-duration: 5s;
    -moz-transition-duration: 5s;
    -o-transition-duration: 5s;
    transition-duration: 5s;
}


.cheersWrapper .smile { 
    display: none;
    position: relative;
}

.cheersWrapper:hover .smile { 
    display: inline-block;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;


    transition: margin-top .5s;
    -webkit-transition: margin-top;
    -moz-transition: margin-top .5s;
    -o-transition: margin-top .5s;

}

.cheersWrapper:hover .smile:hover{

    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);

    margin-top:-25px;

}

.cheersWrapper .cheers{
    display: inline-block; 
}

演示：http://jsfiddle.net/vmrq7ep7/3/

看起来有点像帕金森综合症，卡住了。

我怎样才能让它的边距顶部动画化？

在此先感谢您的帮助。

Answer 1

您可以使用 css translate 而不是 .cheersWrapper:hover .smile:hover class 的边距：

transform:rotate(90deg) translate(0,-25px);

然后对于 .cheersWrapper:hover .smile class 设置：

transition-property: transform;

已编辑 jsfiddle：http://jsfiddle.net/vmrq7ep7/4/

顺便说一句，对于 IE9，您应该只需要 -webkit- 前缀和 -ms-。

过渡 - 无法获得旋转和更改边距顶部值的跨度

Transitions - Can't get span to both rotate and change margin-top value

html

css

css-transitions