zuraavl

transform: translateX() - если горизонтально -100% влево и 100% вправо
transform: translateY() - если вертикально, соответственно.
и вместо процентов в keyframes используй просто from {} и to {}

то есть будет выглядеть
from {transform: translateX(0%);}
to {transform: translateX(-100%);}

Если в процентах не получается, попробуй пиксели

можешь добавить к блоку где много текста фиксированную ширину - пикселей 150. Тогда текст будет не наезжать, а переноситься на новую строку

codepen.io/thibaudbe/pen/HEwLz
добавление событий на Drag'n'drop
и вот
codepen.io/rhernando/pen/uzDIk
почти то, что тебе нужно

и вот как у меня получилось
codepen.io/Zuraavl/pen/RNBReV

Решилось добавлением события для слика по клику на таб:
$('.tabs a').on('click', function() {
$('.slider').slick('slickAdd',"");
});

Можно использовать связку WOW.js и animate.css.