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

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。我如何保持轮换持续？

来源

2014-09-04 Howdy_McGee

请正确说明问题...... – 2014-09-04 14:10:29

当状态悬停时，旋转仅在此处。我相信你的代码没有问题。如果你想保持悬停状态丢失时的旋转/边距设置，你可能想要使用动画，并转发:) – 2014-09-04 14:14:47

@ C-linkNepal我是呃，不知道如何澄清这一点 - 重新设置旋转css在过渡结束时，我提供了一个现场示例以及我的代码... – 2014-09-04 14:29:02

尝试增加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。

来源

2014-09-04 14:15:20

击败我:) – verism 2014-09-04 14:16:05

请包括一些解释，以便此问题的其他人将受益于此解决方案。 – LcSalazar 2014-09-04 14:17:44

@LcSalazar我补充说明。 – 2014-09-04 14:23:56

它的工作使用这种方法

不要使用margin动画使用translate istead。
更好的平滑过渡

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%); 
}

来源

2014-09-04 14:23:24 Suresh

在演示中你有4次'-webkit-transform' – 2014-09-04 14:26:05

好吧谢谢更新！ – Suresh 2014-09-04 14:26:56

CSS3转换保持重置旋转

回答

它的工作使用这种方法

Demo

相关问题