【问题标题】：CSS3 Transition Keeps Resetting Rotation [duplicate]CSS3过渡不断重置旋转[重复]
【发布时间】：2014-10-29 07:54:45
【问题描述】：

我有一个 CSS3 过渡，但在过渡结束时我的旋转重置为正常状态。 HTML 和 CSS 很简单：

HTML

<a href="#"><span></span>Test</a>

CSS

a {
    text-decoration: none;
}
a span {
    display: inline-block;
    width: 25px;
}
a span:before {
    content:'>';
    font-size: 10px;
    font-weight: bold;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
a:hover span:before {
    margin-left: 55%;
    -webkit-transform: rotate(-90deg);
}

过渡按预期进行，除了在动画的最后旋转重置为正常状态而不是持续存在。我创建了一个JSFiddle as an example。如何保持我的轮换持续？

【问题讨论】：

请正确澄清问题...
旋转仅在状态为悬停时出现。我相信你的代码没有错。如果您想在悬停状态丢失时保持旋转/边距设置，您可能需要使用动画和转发:)
@C-linkNepal 我呃，不知道如何再澄清这一点 - css 旋转确实在过渡结束时重置，我提供了一个实时示例以及我的代码......

标签： html css

【解决方案1】：

尝试添加display: inline-block 像这样：

a:hover span:before {
    margin-left: 55%; 
    -webkit-transform: rotate(90deg); 
    display: inline-block;
}

fiddle.

解释。

:before 或:after 等伪元素默认是内联的，因此它们在转换时存在问题，因此您需要将它们设置为display: block 或display: inline-block。

【讨论】：

请提供一些解释，以便其他遇到此问题的人将从此解决方案中受益。
@LcSalazar 我添加了解释。
我仍然没有看到使用 inline-block 的区别......
@C-linkNepal，你用的是什么浏览器？在没有 inline-block 的 Chrome（至少在我的版本上）中，> 完成了动画，因此旋转，然后传送回它的初始状态（>），也就是不旋转。使用inline-block，在完成动画后它会保持静止并看起来像西里尔字母l，或者在我的演示中它仍然像v，因为我从-90deg 中删除了-。
我正在使用最新版本的火狐...

【解决方案2】：

它的工作使用这个方法

请勿将margin 用于动画使用translate 而不是。
以获得更好的平滑过渡

Demo

html

<a href="#"><span>></span>Test</a>

css

a {
    text-decoration: none;
}
a span {
    display: inline-block;
    width: 25px;
}
a span{
    font-size: 10px;
    font-weight: bold;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
a:hover span{
    -webkit-transform: rotate(-90deg) translateX(50%);
    -moz-transform: rotate(-90deg) translateX(50%);
    -ms-transform: rotate(-90deg) translateX(50%);
    -o-transform: rotate(-90deg) translateX(50%);
    transform: rotate(-90deg) translateX(50%);
}

【讨论】：

在演示中你有 4 次 -webkit-transform
好的，谢谢更新！