ある要素のアニメーションが完了したときに別の要素のアニメーションを開始するには？

勾玉をクリックした後に扉を閉めたいです。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓勾玉をクリックで↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

両サイドの扉が閉まる。

javascriptで#mtをクリック後勾玉が回転をします。
その後に.leftと.right(扉)をしめるようなアニメーションを付け足したいと考えています。
”javascriptクリック後に要素の移動”などを検索してみましたが、
アニメーションをひとつだけ付けることは書いてありますが、複数のアニメーショを付ける等の内容がなく想像で書いた、javascriptのコードは効きませんでした。

下にコードを記載していますが、どこかおかしな点等ありましたらお教えください。

html
1<!-- magatama -->
2                        <div id="mt-box" ontouchstart="">
3                            <img src="img/magatama.png" usemap="#ImageMap" alt="" id="mt">
4                                <map name="ImageMap">
5                                <area href="javascript:b();" class="mt-green" shape="poly" coords="114,34,127,27,146,24,161,25,177,28,193,33,216,45,231,57,246,71,257,90,268,115,274,135,275,150,275,161,274,171,273,179,267,166,264,156,258,147,252,140,242,132,236,128,215,121,197,122,188,125,174,128,152,136,141,136,130,133,124,132,117,129,109,122,101,111,94,99,92,85,92,76,94,66,99,52,106,43,110,38,114,36,114,36" alt="緑" />
6                                <area href="javascript:b();" class="mt-yellow" shape="poly" coords="63,245,68,249,73,253,83,259,95,265,110,270,122,273,138,276,152,277,161,277,173,275,184,273,202,267,214,260,225,253,232,245,243,237,249,230,257,217,261,210,266,196,268,185,265,168,262,159,257,152,252,146,240,137,230,132,216,129,203,128,195,130,186,132,176,138,171,142,167,148,162,154,159,161,156,170,154,181,152,189,149,199,147,206,144,214,141,221,133,230,128,234,120,239,112,243,99,247,92,247,81,247,74,246,69,246,64,244,83,247" alt="黄色" />
7                                <area href="javascript:a();" class="mt-red" shape="poly" coords="106,34,98,35,91,38,85,41,79,45,75,48,69,53,63,57,61,59,57,62,52,71,47,76,45,78,36,92,34,101,32,104,28,116,25,125,24,136,22,149,23,160,24,167,25,177,27,184,28,189,32,201,37,211,40,216,44,224,48,227,54,232,61,236,67,238,78,241,90,242,102,241,109,238,114,235,119,232,123,229,126,226,132,221,136,215,141,207,144,198,144,192,146,187,144,176,145,203,146,184,143,170,139,164,137,159,130,149,123,142,119,140,111,132,108,129,105,125,96,117,92,109,89,99,87,86,89,70,90,63,92,58,93,54,96,49,98,44,101,41,104,36,104,36" alt="赤" />
8                                </map>
9                        </div>
10
11                        <p class='navT'>勾玉をクリックしてください。</p>
12                        
13                        <!-- door -->
14                        <div href="javascript:cL();" class="left"></div>
15                        <div href="javascript:cR();" class="right"></div>

css
1/* magatama */
2#mt-box{
3    height: 25%;
4    text-align: center;
5    position: absolute;
6    top: 20%;
7    animation: fluffy 3s ease 1s infinite alternate;
8}
9@keyframes fluffy{
10    0% { transform:translateY(-5px) }
11    100% { transform:translateY(5px) }
12}
13@keyframes clockwise {
14    0%{ transform:rotate(0);}
15    100%{ transform:rotate(360deg); }
16}
17@keyframes counter {
18    0%{ transform:rotate(0);}
19    100%{ transform:rotate(-360deg); }
20}
21#mt{
22    height: 100%;
23    outline: none;
24}
25/* door */
26.left{
27    border: solid 10px #000;
28    height: 100vh;
29    max-width: 75vh;
30    width: 50vw;
31    position: absolute;
32    left: 0%;
33    background-color: rgb(255, 251, 240);
34    pointer-events: none;
35    transition: .5s;
36    transition-delay: .5s;
37}
38.right{
39    border: solid 10px #000;
40    height: 100vh;
41    max-width: 75vh;
42    width: 50vw;
43    position: absolute;
44    top: 0;
45    right: 0;
46    background-color: rgb(255, 251, 240);
47    pointer-events: none;
48    transition: .5s;
49    transition-delay: .5s;
50}
51.content:hover .left{
52    transform: translateX(-70%);
53}
54.content:hover .right{
55    transform: translateX(70%);
56}
57@keyframes closeL {
58    0%{ transform:translateX(-70%);}
59    100%{ transform:translateX(0%);}
60}
61@keyframes closeR {
62    0%{ transform:translateX(70%);}
63    100%{ transform:translateX(0%);}
64}

javascropt
1const a = () => {
2    document.querySelector('#mt').style.animation='1.5s ease clockwise';
3  };
4  
5  const b = () => {
6    document.querySelector('#mt').style.animation='1.5s ease counter';
7  }
8  
9  document.querySelector('#mt').addEventListener('animationend', () => {
10    location.href = href="";
11  });
12
13  const cL = () => {
14    document.querySelector('.left').style.animation='1.5s closeL';
15  };
16  
17  const cR = () => {
18    document.querySelector('.right').style.animation='1.5s closeR';
19  };

m.ts10806

2021/01/25 05:14

タイトルに要件がなくタグで表現できる内容しかありません。要件を記載してください。あと、「後に」といっても、ひとつひとつイベントを書いていくことになるのではないでしょうか。

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

勾玉をクリックした後に扉を閉めたいです。

関連した質問