Как сгладить transition?

Question

[Анна Бакурова]

практикуюсь в более глубоком использовании css3 и вот столкнулась с проблемой на сайте телефончик (который меняет положение с помощью transition) скроллится с конкретными лагами, что очень отвратительно смотрится... Может Я где накосячила, может css-ом так гладко не сделать и только js (что очень не хотелось бы). Вообщем у кого какое мнение по поводу такого сюрприза.

Answer 1

[Евгений Низамиев]

Жутко, для плавности походу придётся использовать js. Или попробовать с помощью transform: translate(x,y);

Comments

[Анна Бакурова]

сейчас попробую

[Анна Бакурова]

гладко, но обидно...) может есть альтернатива?

[Евгений Низамиев]

@Libris по плавности - нет.
Можно высчитывать top через js. Для максимальной плавности использовать вот это habrahabr.ru/post/114358/, и скорее всего надо будет отключить transition, т.к там будет высчитываться каждый пиксель. Но всё зависит от вашей реализации

[Анна Бакурова]

не заметила что при начале анимации она тормозит

[Анна Бакурова]

не вообще ничего

[Анна Бакурова]

@RadiationX js использовала так как css не может так быстро перерисовывать столько графики

Answer 2

[Александр Борисович]

www.w3schools.com/CSSref/css3_pr_transition-timing...
ease-in-out
matthewlein.com/ceaser
но на js кроссбраузернее, хоть и медленней немного.

Comments

[Анна Бакурова]

Что-то Я не поняла, Вы предлагаете эффект изменить?

[Александр Борисович]

@Libris вру, фиксируйте его через position: fixed;

[Анна Бакурова]

не выйдет, уже делала. мне нужно чтобы на каждом слайде был свой телефон. А к фиксированным элементам не применяется hidden родителя (можете почитать про это)