Как сделать плавне начало анимации при скроле по пунктам меню и плавную остановку?

Question

[Fredd Monty]

Всем привет,
использую плавную прокрутку по якорям.
установил время за которое проходит анимация.
но хотелось бы что бы она плавно начиналась и заканчивалась (останавливалась) тоже плавнее.
медленный старт и медленная остановка.
код который я использую:

$(".navbar-collapse-auto").on("click","a", function (event) {
		event.preventDefault();
		var id  = $(this).attr('href'),
			top = $(id).offset().top-80;
		$('body,html').animate({scrollTop: top}, 900);
	});

Спасибо!.

Answer 1

[Ankhena]

htmlbook.ru/css/transition-timing-function
Там в середине расписаны все типы анимации, а еще пониже показаны.

ease
Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-in
Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-out
Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-out
Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
linear
Одинаковая скорость от начала и до конца.
step-start
Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end
Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps
Ступенчатая функция, имеющая заданное число шагов.
transition-timing-function: steps(<число>, start | end)

Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.
cubic-bezier
Задаёт функцию движения в виде кривой Безье.

Comments

[Fredd Monty]

спасибо, встречал, но не понял как внедрить.

[Ankhena]

Stas Fedorko: да просто CSS-свойство
htmlbook.ru/css/transition

[Fredd Monty]

да я понял что это css, я уже прописывал в css ничего не выходит. вот думал что скриптом можно, но не знаю как.