参见英文答案 >
CSS animation on hover stay at last keyframe when using transform: rotate1个
我有一个CSS3过渡但在转换结束时我的旋转重置为正常状态. HTML和CSS很简单:
我有一个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.如何让我的轮换保持不变?