Как да анимирате свойството box-shadow в css без загуба на производителност

Има обаче по-лесен начин за симулиране на този ефект с минимално преначертаване на обекти и 60FPS: анимирайте свойството opacity на псевдокласа.

Разгледайте демонстрацията и сравнете двете различни техники, които ще разгледаме днес. Ако не виждате разликата, значи сме постигнали това, което искахме. Единствената разлика е как задаваме и анимираме сянката на обекта. Отляво анимираме свойството box-shadow върху събитието hover, а отдясно добавяме псевдоклас, добавяме сянка към него и след това анимираме свойството opacity на елемента.

Ако използвате панела за разработка и задържите курсора на мишката над една от двете демонстрации, ще видите нещо подобно на (зелените ленти са преначертани, по-малките са по-добри):

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3

Може ясно да се види, че в сравнение с картата отдясно (анимация на свойството opacity на псевдо-класа), има повече преначертавания, когато задържите курсора на мишката над картата отляво (анимация на свойството box-shadow).

Защо наблюдаваме такъв ефект? Има няколко свойства в CSS, които могат да бъдат анимирани, без обектът да се преначертава постоянно на всеки кадър, и това са непрозрачност и трансформация. Променяйки само тези две свойства по време на анимацията, минимизираме броя на преначертанията на обекти (по този начин намаляваме работата на браузъра). Разликата между подходите е значителна, нека напишем стиловете:

---