Div heightアニメーションの方向の問題が底から

Question

私はテキストの上に：after要素を使用してアニメーションを入力し、アニメーションを作成してアニメーションを完成させます。

これは、my：after要素のposition absoluteとtop 0でうまくいきます。しかし、高さはアニメーション方向を下から上に変えたい場合は、下端0をトップ0に変更する必要があります。

これはどこに問題があるのでしょうか？テキストブロック？ここで

私のコードです：https://codepen.io/1conu59/pen/zdVXOP

.text { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12em; 
 
    font-weight: 700; 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: black; 
 
    color: #fff; 
 
} 
 

 
.text:after { 
 
    transition: all 1s ease; 
 
    content: attr(data-content); 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color: black; 
 
    width: 100%; 
 
    height: 0%; 
 
    overflow: hidden; 
 
    *background-color: black; 
 
    z-index: 1000; 
 
} 
 

 
.text:hover:after { 
 
    height: 100%; 
 
    border-radius: 0px; 
 
}

<div class="text" data-content="Grandioso"> 
 

 
\t Grandioso 
 

 
</div>

の.textのためのボトム0を最0を変更してみてください：の後に、問題をあなたの助けのための

感謝を参照してください！

編集：もしあなたが密接に見ると、私はある種のブラウザの不具合にも問題があると思います。アニメーションが完了したときにテキストの周りに0.5ピクセルの線があり、0％から100％ではなく100％から0％にアニメートするときにのみ表示されます。あなたはそれをどのように修正するか考えていますか？私はテキストの影を使用しますが、結果は素晴らしいものではありません...

Answer 1

あなたの答えは以下のスニペットを参照してください。 heightプロパティを100％から0％にアニメーション化し、デフォルトの色を変更した後、色の後に100％の高さを取ります。それが役に立てば幸い。

.text { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12em; 
 
    font-weight: 700; 
 
    position: relative; 
 
    display: inline-block; 
 
    color:#39A966; 
 
} 
 

 
.text:after { 
 
    transition: all 1s ease; 
 
    content: attr(data-content); 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    *background-color: black; 
 
    z-index: 1000; 
 
} 
 

 
.text:hover:after { 
 
    height: 0%; 
 
    border-radius: 0px; 
 
}

<div class="text" data-content="Grandioso"> 
 

 
    Grandioso 
 

 
</div>