我有一個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

相關問題