CSS：奇妙なボックスのシャドウトランジション

Question

私は隣にある要素と同じ色のボックスシャドウを持っていますが、私はCSSトランジションを使ってその両方をフェードインしています。ボックスシャドウと背景色のCSSトランジションは同じなので、なぜ別のレートでフェードインするのかわかりません。

Here a jsfiddle to reproduce the issue、ここでは、関連するSCSSである：

.right-of-blue { 
    box-shadow: 8px 0 transparent; 
} 

.outline, .background { 
    border-color: transparent; 
    background-color: transparent; 
} 

// Clicking the button toggles this class on the wrapper div 
.colors-enabled { 
    .should-animate { 
    transition: 
    background-color .5s, 
    box-shadow .5s, 
    border-color .5s; 
    } 

    .outline { 
    border-width: 1px 2px; 
    margin: 0 -2px; 
    background: none !important; 
    border-style: solid; 
    } 

    .background { 
    border-width: 1px; 
    margin: 0 -1px; 
    border-style: solid; 
    } 

    .red { 
    border-color: $red; 
    background-color: $red; 
    } 

    .blue { 
    border-color: $blue; 
    background-color: $blue; 
    } 

    .right-of-blue { 
    box-shadow: 8px 0 $blue; 

    // Bump the outline/background of the next segment over to make room for the box shadow 
    & + span.outline { 
     margin-left: 0; 

     // Bump the text inside back to keep it from moving 
     & > span > span { 
     margin-left: -2px; 
     } 
    } 
    } 
} 

Answer 1

、それが原因で異なるレートではないように私には思えます。青い背景の不透明度が例えば0.25の場合、影のための0.25もそのため、このように感じます。 2つの0.25の不透明度の重なりは0.5と感じさせます。

重複を避けるためにあなたのフィドルを変更し、重複する境界線の色も削除しました。あなたは以前と同じように感じることはありません。

.right-of-blue { 
    box-shadow: 0 8px transparent; 
} 

ここでチェック：

https://jsfiddle.net/ahmadm/kxyua0dj/