Здравствуйте. Делаю слайды, и в них передвигаю широоокий блок с помощью
transform:translateX() по области блока, в котором он находится (т.е. остальные части скрыты с помощью свойства
overflow: hidden).
Использую такую команду в яваскрипте:
$(выборка).css("transform", "translateX("+poz+"px)");
// poz - значение, числовой вид - конечное положение
// известно и первоначальное положение (например, pozFirst)
То есть, значение
translateX = 0. При нажатии на "след.", или по истечении тайм-аута включается функция, в котором значение
translateX вносится в переменную
pozFirst.
И этой переменной добавляется ширина изображения (чтобы полностью перейти к другой), т.е.:
poz = pozFirst + imageWidth;
И пишется команда изменения стиля, которую написал выше.
Так вот, хотел бы сделать анимацию перехода. Пробовал так - не работает:
$(выборка).animate({transform: "translateX("+poz+"px)"},"slow");
С помощью анимации CSS (
@keyframes) даже пробовать не стал - вообще не понятно, в .css() что куда вписывать. Да и примеров в интернете не нашел.
Помогите пожалуйста, как сделать подобную анимацию?