JavaScriptにて、タブメニューのスライドアニメーションをクリックした時のみ動くようにしたい

現在タブメニューのタブ部分をクリックした際に、内容部分が左から右へと動いて切り替わるようなアニメーションをCSSにて実装し、JavaScriptでclassの付け替えを行うことで実行させています。
しかし、現在の方法だと、単にactiveというクラスに付随してアニメーションが設定されているため、起動時（ページ読み込み時）にデフォルトでactiveクラスがついている要素にアニメーションがついてしまいます。
これをタブをクリックした時のみアニメーションが実装されるようにしたいのですが、方法が全く思い浮かばず困っております。ご教授いただけると幸いです。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>tabメニュー</title>
7  <link rel="stylesheet" href="tab.css">
8</head>
9<body>
10  <div class="conteiner">
11    <ul class="menu">
12      <li><a href="#" class="tab active"  id="a-1">Tab1</a></li>
13      <li><a href="#" class="tab" id="a-2">Tab2</a></li>
14      <li><a href="#" class="tab" id="a-3">Tab3</a></li>
15    </ul>
16    <section class="contents active" id="contents-1">
17      <p>コンテンツ１</p>
18    </section>
19    <section class="contents" id="contents-2">
20      <p>コンテンツ２</p>
21    </section>
22    <section class="contents" id="contents-3">
23      <p>コンテンツ３</p>
24    </section>
25  </div>
26  <script src="tab.js"></script>
27</body>
28</html>

CSS
1.conteiner{
2  width: 1000px;
3  margin-left: auto;
4  margin-right: auto;
5}
6.menu{
7  list-style: none;
8  padding: 0px;
9  margin: 0px;
10  display: flex;
11}
12.tab{
13  display: inline-block;
14  width: 100px;
15  text-decoration: none;
16  padding: 8px 10px;
17  text-align: center;
18  color: black;
19}
20li:hover{
21  background-color: #CCCCCC;
22}
23.contents{
24  display: none;
25  border: solid 3px black;
26  min-height: 30px 0px 30px 20px;
27  font-size: 40px;
28  padding-left: 20px;
29  overflow: hidden;
30}
31.contents p{
32  animation:slidein 1s;
33}
34@keyframes slidein{
35  0% {
36    transform: translateX(-200px);
37  }
38  40%{
39    transform: translateX(1000px);
40  }
41  50%{
42    transform: translateX(1800px);
43  }
44  75%{
45    transform: translateX(-500px);
46    opacity: 0;
47  }
48  100% {
49    transform: translateX(0px);
50  }
51}
52.active{
53  display: block;
54}
55a.active{
56  background-color: #FFCCCC;
57  transition: 0.5s;
58  border-radius: 5px;
59}

JavaScript
1// タブメニュー１に対する処理
2document.getElementById('a-1').addEventListener('click', () => {
3  // aタグが点滅する処理
4  document.getElementById('a-1').classList.add('active');
5  document.getElementById('a-2').classList.remove('active');
6  document.getElementById('a-3').classList.remove('active');
7  // コンテンツを表示する処理
8  document.getElementById('contents-1').classList.add('active');
9  document.getElementById('contents-2').classList.remove('active');
10  document.getElementById('contents-3').classList.remove('active');
11});
12// タブメニュー２に対する処理
13document.getElementById('a-2').addEventListener('click', () => {
14  // aタグが点滅する処理
15  document.getElementById('a-2').classList.add('active');
16  document.getElementById('a-1').classList.remove('active');
17  document.getElementById('a-3').classList.remove('active');
18  // コンテンツを表示する処理
19  document.getElementById('contents-2').classList.add('active');
20  document.getElementById('contents-1').classList.remove('active');
21  document.getElementById('contents-3').classList.remove('active');
22});
23// タブメニュー３に対する処理
24document.getElementById('a-3').addEventListener('click', () => {
25  // aタグが点滅する処理
26  document.getElementById('a-3').classList.add('active');
27  document.getElementById('a-2').classList.remove('active');
28  document.getElementById('a-1').classList.remove('active');
29   // コンテンツを表示する処理
30   document.getElementById('contents-3').classList.add('active');
31   document.getElementById('contents-1').classList.remove('active');
32   document.getElementById('contents-2').classList.remove('active');
33});

行動規範の内容に同意します

回答1件

こんにちは、自分の解釈が正しいかわかりませんが、以下のコードで出来るかもしれません。
タブをクリックした時、アニメーション用のCSSをHTMLのヘッドにstyleタグで追加する方法です。（タブを2回目以降クリックした場合はstyleタグは追加されません）

CSSのコードから.contents p{ animation:slidein 1s; }の部分を削除します。

CSS
1.conteiner {
2    width: 1000px;
3    margin-left: auto;
4    margin-right: auto;
5}
6.menu {
7    list-style: none;
8    padding: 0px;
9    margin: 0px;
10    display: flex;
11}
12.tab {
13    display: inline-block;
14    width: 100px;
15    text-decoration: none;
16    padding: 8px 10px;
17    text-align: center;
18    color: black;
19}
20li:hover {
21    background-color: #cccccc;
22}
23.contents {
24    display: none;
25    border: solid 3px black;
26    min-height: 30px 0px 30px 20px;
27    font-size: 40px;
28    padding-left: 20px;
29    overflow: hidden;
30}
31@keyframes slidein {
32    0% {
33        transform: translateX(-200px);
34    }
35    40% {
36        transform: translateX(1000px);
37    }
38    50% {
39        transform: translateX(1800px);
40    }
41    75% {
42        transform: translateX(-500px);
43        opacity: 0;
44    }
45    100% {
46        transform: translateX(0px);
47    }
48}
49.active {
50    display: block;
51}
52a.active {
53    background-color: #ffcccc;
54    transition: 0.5s;
55    border-radius: 5px;
56}

Javascript
1var style = null;
2// タブメニュー１に対する処理
3document.getElementById("a-1").addEventListener("click", () => {
4    if (!style) {
5        style = document.createElement("style");
6        style.innerHTML = ".contents p { animation:slidein 1s; }";
7        document.getElementsByTagName("head")[0].appendChild(style);
8    }
9    // aタグが点滅する処理
10    document.getElementById("a-1").classList.add("active");
11    document.getElementById("a-2").classList.remove("active");
12    document.getElementById("a-3").classList.remove("active");
13    // コンテンツを表示する処理
14    document.getElementById("contents-1").classList.add("active");
15    document.getElementById("contents-2").classList.remove("active");
16    document.getElementById("contents-3").classList.remove("active");
17});
18// タブメニュー２に対する処理
19document.getElementById("a-2").addEventListener("click", () => {
20    if (!style) {
21        style = document.createElement("style");
22        style.innerHTML = ".contents p { animation: slidein 1s; }";
23        document.getElementsByTagName("head")[0].appendChild(style);
24    }
25    // aタグが点滅する処理
26    document.getElementById("a-2").classList.add("active");
27    document.getElementById("a-1").classList.remove("active");
28    document.getElementById("a-3").classList.remove("active");
29    // コンテンツを表示する処理
30    document.getElementById("contents-2").classList.add("active");
31    document.getElementById("contents-1").classList.remove("active");
32    document.getElementById("contents-3").classList.remove("active");
33});
34// タブメニュー３に対する処理
35document.getElementById("a-3").addEventListener("click", () => {
36    if (!style) {
37        style = document.createElement("style");
38        style.innerHTML = ".contents p { animation:slidein 1s; }";
39        document.getElementsByTagName("head")[0].appendChild(style);
40    }
41    // aタグが点滅する処理
42    document.getElementById("a-3").classList.add("active");
43    document.getElementById("a-2").classList.remove("active");
44    document.getElementById("a-1").classList.remove("active");
45    // コンテンツを表示する処理
46    document.getElementById("contents-3").classList.add("active");
47    document.getElementById("contents-1").classList.remove("active");
48    document.getElementById("contents-2").classList.remove("active");
49});