JavaScriptにて、タブメニューを切り替えた時に文字を左から右へと動かすアニメーションを実現したい

現在JavaScriptにて、タブメニューの作成を行っており、ガワはHTMLとCSSにて出来上がったのですが、下記のURLのようにタブを切り替えた際に文字を左から右へと動かすようなアニメーションの実装ができず、困っております。
https://gyazo.com/e777fa0e18efc60b081fe09202291bcd
自分なりに検索を重ねて文字を動かす方法を探ったのですが、ボックス内にて文字を動かす方法がどうしても実現できずにいます。候補等ありましたらご回答よろしくお願いいたします。

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="tab1 active" data-id="1">Tab1</a></li>
13      <li><a href="#" class="tab2" data-id="2">Tab2</a></li>
14      <li><a href="#" class="tab3" data-id="3">Tab3</a></li>
15    </ul>
16    <section class="contents active" id="1">
17      コンテンツ１
18    </section>
19    <section class="contents" id="2">
20      コンテンツ２
21    </section>
22    <section class="contents" id="3">
23      コンテンツ３
24    </section>
25
26  </div>
27

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.menu li a{
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}
29.active{
30  display: block;
31}
32section{
33  padding: 20px;
34}
35a.active{
36  background-color: #FFCCCC;
37  transition: 0.5s;
38  border-radius: 5px;
39}

JavaScript
1// 宣言
2const menuItems =document.querySelectorAll('.menu li a');
3const contents =document.querySelectorAll('.contents');
4// メニュー部分に対する処理
5menuItems.forEach(item => {
6  item.addEventListener('click', e => {
7    e.preventDefault();
8    menuItems.forEach(item => {
9      item.classList.remove('active');
10    })
11    item.classList.add('active');
12    contents.forEach(content => {
13      content.classList.remove('active');
14      document.getElementById(item.dataset.id).classList.add('active');
15    });
16  });
17});
18
19
20

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

回答3件

自己解決

CSSのanimationプロパティにて実現できました。
ありがとうございました。

CSS
1.contents p{
2  animation:slidein 1s ;
3}
4@keyframes slidein{
5  0% {
6    transform: translateX(-200px);
7  }
8  40%{
9    transform: translateX(1000px);
10  }
11  50%{
12    transform: translateX(1800px);
13  }
14  75%{
15    transform: translateX(-500px);
16    opacity: 0;
17  }
18  100% {
19    transform: translateX(0px);
20  }
21}

投稿2020/05/26 21:00

enjinia555

総合スコア3

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.menu li {
13  width: 100px;
14  overflow: hidden;
15}
16.menu li a{
17  display: inline-block;
18  width: 100px;
19  text-decoration: none;
20  padding: 8px 10px;
21  text-align: center;
22  color: black;
23}
24li:hover{
25  background-color: #CCCCCC;
26}
27.contents{
28  display: none;
29  border: solid 3px black;
30  min-height: 30px 0px 30px 20px;
31  font-size: 40px;
32}
33.active{
34  display: block;
35}
36.menu li a.active {
37  text-align: left;
38  animation: moveToRight 3s linear 0s infinite normal none running;
39}
40section{
41  padding: 20px;
42}
43a.active{
44  background-color: #FFCCCC;
45  transition: 0.5s;
46  border-radius: 5px;
47}
48
49@keyframes moveToRight {
50  0% { text-indent: -100px;}
51  100% { text-indent: 100px;}
52}