成長：中心からのコンテンツ幅の前に

Question

私は最近、テキスト進行スタイリングのための次のアプローチを発見しました。また、中心から要素幅を拡大する回避策があるかどうか疑問に思っています。左側から。

body { 
 
    background-color: black; 
 
} 
 

 
p { 
 
    color: rgba(255, 255, 255, .4); 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 40px; 
 
    height: 85px; 
 
    position: relative; 
 
} 
 

 
p:before { 
 
    max-width: 100%; 
 
    width: 0; 
 
    height: 85px; 
 
    color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    content: attr(data-text); 
 
    display: block; 
 
    animation: background-fill 15s ease-in-out infinite forwards; 
 
} 
 
    
 
@keyframes background-fill { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
}

<p data-text='Text'>Text</p>

Answer 1

またによりleftとtext-indent

をアニメーション化することを実現することができ、私もそれがテキストと白ではないスペースをアニメーション化して、インラインブロックとして表示するようにpを変更しました。

Gaby aka G. Petrioliのおかげで、Firefoxはパーセントベースのtext-indentで問題が発生しているようですので、私はそれを克服するCSSハックを追加しました。そして再び（残念ながらIE上で失敗しても）

body { 
 
    background-color: black; 
 
} 
 

 
p { 
 
    color: rgba(255, 255, 255, .4); 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 40px; 
 
    height: 85px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
p:before { 
 
    max-width: 100%; 
 
    width: 0; 
 
    height: 85px; 
 
    color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    content: attr(data-text); 
 
    display: block; 
 
    animation: background-fill 5s ease-in-out infinite forwards; 
 
} 
 
    
 
@keyframes background-fill { 
 
    0% { 
 
    left: 50%; 
 
    text-indent: -50%; 
 
    width: 0; 
 
    } 
 
    100% { 
 
    left: 0; 
 
    text-indent: 0; 
 
    width: 100%; 
 
    } 
 
} 
 

 
/* Begin - Firefox bug fix */ 
 
@supports (-moz-appearance:meterbar) and (display:flex) { 
 
    p:before { 
 
    width: auto; 
 
    right: 50%; 
 
    left: 50%; 
 
    display: flex; 
 
    justify-content: center; 
 
    } 
 
    @keyframes background-fill { 
 
    0% { 
 
     right: 50%; 
 
     left: 50%; 
 
    } 
 
    100% { 
 
     right: 0; 
 
     left: 0; 
 
    } 
 
    } 
 
} 
 
/* End - Firefox bug fix */

<p data-text='Text'>Text</p>

---

CSSハックの代わりにFirefoxの問題を解決しギャビーのおかげで、彼は現在、回答を削除するためには、aはページの読み込み時に要素の実際の幅を測定し、%の代わりにをpxと設定した小さなスクリプトです。