CSSボタンのアニメーションが機能しない

Question

私は、ページ内のいくつかのボタンのホバー上で実行するアニメーションを取得しようとしています。私はこれを達成するために、次のCSSを書いた：

#B1 { 
    margin: 50px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 50%; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
} 

アニメーションがしかし、私のアニメーションはありません、ページの下部に黒のdivにあるボタンの底部に小さなバーをロードすることになっていますうまくいかない。問題の原因は何ですか？

https://codepen.io/Feners4/pen/KggAwg

Answer 1

あなたが要素の上に置くとバーを表示する幅を提供する必要があります。

希望の結果を得るには、以下のCSSを使用してください。

#B1 { 
    margin: 50px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
} 

#B1:hover::after { 
    width:100% 
} 

#B2:hover::after { 
    width:100% 
} 

ペン：https://codepen.io/anon/pen/LxYEdX

Answer 2

あなたはマウスオーバーした後、バーのスタイル値を設定しませんでした。

ボタンをマウスオーバーすると、バーの幅がボタンで100％に変更されます。

CSSスタイルを追加してください "&を：ホバー：;：{100％幅}の後に" ＃B1と＃B2の

Codepen：http://codepen.io/onyoon7/pen/rjNaov

#B1 { 
    margin: 50px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
    &:hover:after { 
    width: 100%; 
    } 
} 

#B2 { 
    margin: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
    &:hover:after { 
    width: 100%; 
    } 
}