如何使用CSS3轉換字體樣式？

Question

我有一個單詞標題被分成兩部分，用@keyframe動畫並在頁面中間相遇。 問題：在頁面中間到達正確位置後，我需要將其中一半從常規轉換爲斜體。 因爲我不打算讓標題可點擊，所以使用懸停沒有意義。 有沒有辦法做到這一點，而不訴諸於JavaScript ...？

Answer 1

由於字體樣式是not an animatable property，您可以使用偏斜變形。

h1 span { 
 
    position: relative; 
 
} 
 
#title_part1 { 
 
    animation: part1_move 2s; 
 
} 
 
#title_part2 { 
 
    
 
    animation: part2_move 2s,part2_skew 4s; 
 
    
 
    display: inline-block; 
 
    -ms-transform: skewX(-20deg); 
 
    transform: skewX(-20deg); 
 
} 
 

 
@keyframes part1_move { 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 0; 
 
    } 
 
} 
 

 

 
@keyframes part2_move { 
 
    from { 
 
    left: 100px; 
 
    } 
 
    to{ 
 
    left:0 
 
    } 
 
} 
 

 
@keyframes part2_skew{ 
 
    from { 
 
    transform:skewX(0); 
 
    -ms-transform:skewX(0) 
 
    } 
 
    50%{ 
 
    transform:skewX(0); 
 
    -ms-transform:skewX(0) 
 
    } 
 
    to{ 
 
    transform:skewX(-20deg); 
 
    -ms-transform:skewX(-20deg) 
 
    } 
 
}

<h1> 
 
    <span id="title_part1">The start and </span> 
 
    <span id="title_part2">the end of my title </span> 
 
</h1>

相關的問題：

Fade from normal text to italics text smoothly?

Gradual italics?