Привет! Помогите, пожалуйста, реализовать такой функционал: при клике на "Далее" старая пара должна уезжать вправо (с уменьшением opacity), а новая пара должна приезжать слева (с увеличение opacity). Сложность в том, что сделать это нужно с минимальным вмешательством в JS (точнее, мы можем добавить какой-то класс в момент нажатия "далее" и все. Убирать класс через Х секунд нельзя).
Гуру CSS, мне нужна ваша помощь!
P.S: поддержка сатрых браузеров не нужна. У них может пара меняться "резко".
P.P.S: крутил keyframes, но так и не смог осилить (так как ширина не фиксированная, а position:absolute сбрасывает ширину от margin:auto до width:auto).
P.P.S: песочница -
https://jsfiddle.net/3qpnvvun/
P.P.P.S: после того, как старая пара уехала она должна стать некликабельной (в идеале display:none).
P.P.P.P.S: если это реализовать архисложно, то напишите об этом, пожалуйста.
Простой
Простой