html+状态保持,HTML – CSS3转换保持重置旋转

参见英文答案 >

CSS animation on hover stay at last keyframe when using transform: rotate                                    1个

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

HTML

Test

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.如何让我的轮换保持不变？