Блог

Смотрите картинку ниже. Изображение слева находится в «состоянии покоя», изображение справа — во время анимации CSS3 на другом элементе страницы (анимация также находится на значке SVG).

Анимация проста:

 element {
    -webkit-transform  : scale( .8 );
    -webkit-transition : all .2s;
}

element:hover {
    -webkit-transform  : scale( 1 );
}
 

Есть какие-нибудь идеи, как это исправить? В идеале, как сделать значки «всегда четкими», но «всегда размытыми» тоже будет работать.

Это должно выполнить свою работу:

 element {
    -webkit-transform  : scale(.8) translatez(0);
    -webkit-transition : all .2s;
}

element:hover {
    -webkit-transform  : scale(1) translatez(0);
}