Javascript 让jquery添加（或触发？）动画

所以我有一个图表，它是通过一个漂亮的动画填充的。这是因为图形中的每个条都有css属性

动画：向左滑动0.9秒，向内滑动1秒，向外滑动1秒

动画如下所示：

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(-200%);
  }

  70% {
    -webkit-transform: translateX(2%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

$("#button").on('click', show_function);

function show_function() {
    $(".graph").fadeIn("slow");
    $('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}

现在，我不太擅长javascript，但我希望在点击按钮时（并在点击按钮之前隐藏图形）而不是页面加载时发生这种情况

现在我已经从css选择器中删除了动画属性，并添加了
translateX（-200%）

意识到如果我添加
动画：向左滑动0.9秒，向外滑动1秒通过
检查元素
，这正是我想要的

所以我找到了一个“解决方案”，看起来像这样：

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(-200%);
  }

  70% {
    -webkit-transform: translateX(2%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

$("#button").on('click', show_function);

function show_function() {
    $(".graph").fadeIn("slow");
    $('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}

$（“#按钮”）。在（'click'，show#u函数）上；
函数show_函数（）{
$（“.graph”）.fadeIn（“慢”）；
$（'.bar container>*{animation:slide left 1s ease in out 1s both；}'）.prependTo（'body'）；
}

这感觉“笨重”，几乎需要一秒钟来加载。所以我想知道在javascript/JQuery中使用函数触发动画的更好方法是什么？
最好的答案可能是在类中使用动画序列，然后使用JQuery添加类。例如。
CSS

然后是JS

$("#button").on('click', show_function);

function show_function() {
    $(".graph").fadeIn("slow");
    $('.bar-container').addClass('slide-it');
}