W3schoolsのクリック例に「波紋」効果を追加

Question

最近w3schoolsでCssを勉強していますが、これはどのようにしてexampleが動作するのか完全に理解できません。

私は誰かがこのうち私を助けることができればそれはGREATFULだろう

.button:after { 
transition-duration: 0.4s; 
    } 

.button:after { 
transition: all 0.8s; 
    } 

.button:active:after { 
transition: 0s 
} 

この例では、次の3遷移コードの違いや使用何konwません。

Answer 1

すべて手段は要素

のすべてのプロパティに適用されます

transition-property: font-size; 
transition-duration: 0.4s; 
transition-delay: 2s;/*if you want a delay*/ 

を追加する必要があります、あなたのケースでdeveloper.mozilla

transition: <property> <duration> <timing-function> <delay>; 

から学ぶ

ここ

.button:after { 
    transition-duration: 0.4s; 
} 

より良いです

.button:after { 
     transition: all 0.8s; 
    } 

Answer 2

.button:active:after { 
transition: 0s 
} 

これは、0秒以内にクリック上の白いボックスが表示されるようになります。

.button:after { 
transition: all 0.8s; 
    } 

これにより、0.8秒後に白いボックスが見えなくなります。

.button:after { 
transition-duration: 0.4s; 
    } 

これはあなたの特定の例では、任意の真の目的を果たしていませんが、（例えば）:hover効果と組み合わせて使用​​することができます。