Клиентская оптимизация – как правильно выполнить css-анимацию для свойства box-shadow:

/* All HTML you need is 
*/ /* Create a simple white box, and add the shadow for the initial state */ .box { position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out; } /* Create the hidden pseudo-element */ /* include the shadow for the end state */ .box:after { content: ''; position: absolute; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: opacity 0.3s ease-in-out; }

Ссылка на оригинал