CSS3變換轉換到左

我有，我想CSS3動畫添加到它的標題CSS3變換轉換到左

我想改造

標題

到

[標題]

我想要方括號從中心動畫與動畫邊界的單詞。

像..

鈦[] TLE

到

[標題]

動畫（ofcourse我使用:before:after加括號與opacity 0到1）

我的p style：

p:before { 
    content: "["; 
    position: absolute; 
    left: 50%; /*to add the bracket to the center of the word*/ 
    opacity: 0; 
    transition: all 0.7s ease; 
}

謝謝！

來源

2015-09-16 Joseph Khella

，什麼是你的問題？代碼有什麼問題？ – fcalderan

@FabrizioCalderan這是起始樣式，我仍然缺少翻譯類，這種樣式將方括號添加到單詞的中心，我想將括號翻譯到單詞的左側 –

爲什麼您需要當你定位它時翻譯它。爲什麼不只是轉換/動畫位置值？ –

p { 
 
    display: table; 
 
    position: relative; 
 
} 
 

 
p:before, 
 
p:after{ 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 0.7s ease; 
 
} 
 

 
p:before { 
 
    content: "["; 
 
    left: 50%; 
 
} 
 

 
p:after { 
 
    content: "]"; 
 
    right: 50%; 
 
} 
 

 
p:hover:before { 
 
    left: -5px; 
 
    opacity: 1; 
 
} 
 

 
p:hover:after { 
 
    right: -5px; 
 
    opacity: 1; 
 
}

<p>Title</p> 
 

 
<p>A Longer Title</p>

來源

2015-09-16 11:42:33 Turnip

確切的，但你正在把精確的像素值，重點是，我不知道這個詞的大小，thx的回覆 –

這個詞的大小是無關緊要的。 -5px將從詞的末尾放置括號5px，不管它多長時間 – Turnip

查看更新示例 – Turnip

這是你在找什麼？

與這個網站：

<div> 
<a href="" class="link4">TESTING</a> 
</div>

這些CSS的：

div{ 
     padding: 18px 0 18px 0; 
    display: inline-block; 
    margin-right: 40px; 
} 
a { 
    color: #999; 
    display: inline-block; 
    text-align: center; 
    width: 200px; 
    text-decoration: none; 
} 
a:before, a:after { 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 
    -moz-transition: -moz-transform 0.3s, opacity 0.2s; 
    transition: transform 0.3s, opacity 0.2s; 
} 

a:before { 
    margin-right: 10px; 
    content: '['; 
    -webkit-transform: translate(20px, -1px); 
    -moz-transform: translate(20px, -1px); 
    transform: translate(20px, -1px); 
    vertical-align: top; 
} 

a:after { 
    margin-left: 10px; 
    content: ']'; 
    -webkit-transform: translate(-20px, -1px); 
    -moz-transform: translate(-20px, -1px); 
    transform: translate(-20px, -1px); 
} 

a:hover:after { 
    opacity: 1; 
    -webkit-transform: translate(0px, -1px); 
    -moz-transform: translate(0px, -1px); 
    transform: translate(0px, -1px); 
} 
a:hover:before { 
    opacity: 1; 
    -webkit-transform: translate(0px, -1px); 
    -moz-transform: translate(0px, -1px); 
    transform: translate(0px, -1px); 
}

你得到這個JSFIDDLE

來源

2015-09-16 11:42:56

你可以做到這一點使用幀動畫。這樣你就不必爲了動畫的開始而懸停元素（或其他任何東西）。

參見：http://jsfiddle.net/Paf_Sebastien/j2cvagjf/

集:before和:after這樣的：

h1:before { 
    content: "["; 
    position: absolute; 
    display: block; 
    top: 0; 
    -webkit-animation: bracketleft 1s 1 forwards; 
    animation: bracketleft 1s 1 forwards; 
}

然後處理動畫：

@-webkit-keyframes bracketleft { 
    0% { opacity: 0; left: 50%; } 
    100% { opacity: 1; left:-10px; } 
} 
@-webkit-keyframes bracketright { 
    0% { opacity: 0; right: 50%; } 
    100% { opacity: 1; right: -10px; } 
}

來源

2015-09-16 11:59:20 Sebastien

CSS3變換轉換到左

回答

相關問題