CSSトランジションを有効にするボックスシャドウの色

Question

CSSのtransitionをボックスシャドウの色をターゲットに限定することは可能ですか？

たとえば、ボックスシャドウのボタンがあります。ボタンをクリックすると、ボタンが圧縮されたように見えるように、下に移動してボックスの影が縮小します。 See this example。

しかし、ボタンを色を変えることもできますが、このエフェクトをトランジションしたいと考えています。

#button { 
    transition: background-color 0.2s linear; 
    transition: box-shadow 0.2s linear; 
} 

私の問題は、ボタンが押されたときだけでなく、色が変わったときにも起こるということです。これは、ボックスの影がゆっくりと縮小し、ボタンがすぐに下に移動することを意味します。 See this example。私は、ボタンのプレスと動きが瞬間的で、遷移しないようにしたいので、CSSのtransition: box shadowプロパティはボックスの影の色にのみ影響しますか？

もしそうでない場合は、他に方法がありますか？おそらくjQueryで？ありがとうございました。

Answer 1

はい、実際の緑色のボタンである擬似要素::afterを使用して少しトリックが必要ですが、シャドウカラーのみをアニメートして、ボタン自体に影を設定できます。

このようにして、「ボタン」だけを移動させると同時に、シャドウのみをアニメートすることができます。以下のサンプルでは、​​それを赤色にアニメートすることを選択したので、動作が見やすいです。

.button { 
 
    display: inline-block; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    outline: none; 
 
    border: none; 
 
    border-radius: 15px; 
 
    box-shadow: 0 9px #999; 
 
    transition: box-shadow 1s linear; 
 
    background: transparent; 
 
} 
 
.button::after { 
 
    content: attr(data-buttontext); 
 
    display: inline-block; 
 
    padding: 15px 25px; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    color: #fff; 
 
    background-color: #4CAF50; 
 
    border-radius: inherit; 
 
} 
 
.button:active { 
 
    box-shadow: 0 9px #f00; 
 
} 
 
.button:active::after { 
 
    background-color: #3e8e41; 
 
    transform: translateY(4px); 
 
}

<button class="button" data-buttontext="Example"></button>