各CSSアニメーション終了後に拡大縮小するCSSアニメーションを実行するにはどうすればよいでしょうか。

各CSSアニメーション終了後に以下の拡大縮小するCSSアニメーションを実行するにはどうすればよいでしょうか。

拡大縮小アニメーション(付け加えたい構文)

css
1@keyframes endmove {
2    0% { transform:scale(1,1);}
3   50% { transform:scale(0.5,0.5);}
4  100% { transform:scale(1,1);}}

この構文のアニメーション終了後に上記のアニメーションを加えたい(付け加える先)

html
1<!DOCTYPE html>
2<html lang="ja" >
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6</head>
7<body>
8<div class="parent">
9<span class="child" id="box">
10<div style=" width:400px;height:400px; background-color: #999;">0</div>
11<div style=" width:400px;height:400px; background-color: #555;">1</div>
12<div style=" width:400px;height:400px; background-color: #999;">2</div>
13<div style=" width:400px;height:400px; background-color: #555;">3</div>
14<div style=" width:400px;height:400px; background-color: #999;">4</div>
15<div style=" width:400px;height:400px; background-color: #555;">5</div>
16<div style=" width:400px;height:400px; background-color: #999;">6</div>
17<div style=" width:400px;height:400px; background-color: red;">7</div>
18</span>
19</div>
20<input type="button" onclick="move(1);" value=" 送り " id="btn1"/>
21<input type="button" onclick="move(2);" value=" 戻し " id="btn2"/>
22<select id="divno" onchange="selected();">
23<option value="0" selected>0ページ</option>
24<option value="1">1ページ</option>
25<option value="2">2ページ</option>
26<option value="3">3ページ</option>
27<option value="4">4ページ</option>
28<option value="5">5ページ</option>
29<option value="6">6ページ</option>
30<option value="7">7ページ</option>
31</select>
32</body>
33</html>

css
1div.parent {
2    position: relative;
3    width: 400px;
4    height: 400px;
5    border: 1px solid #ddd;
6    overflow: hidden;
7}
8span.child {
9    position: absolute;
10    width : 400px;
11    height: 3200px;
12    left: 0px;
13    top:0px;
14    /* animation-duration: 1s; */
15    animation-iteration-count: 1;
16    animation-timing-function: linear;
17    animation-fill-mode: forwards;
18}
19
20@keyframes moveDown { 100% { transform:translateY(-400px); }}
21@keyframes moveDown1 { 100% { transform:translateY(-400px); }}
22@keyframes moveDown2 { 100% { transform:translateY(-800px); }}
23@keyframes moveDown3 { 100% { transform:translateY(-1200px); }}
24@keyframes moveDown4 { 100% { transform:translateY(-1600px); }}
25@keyframes moveDown5 { 100% { transform:translateY(-2000px); }}
26@keyframes moveDown6 { 100% { transform:translateY(-2400px); }}
27@keyframes moveDown7 { 100% { transform:translateY(-2800px); }}
28@keyframes moveUp { 100% { transform:translateY(400px); } }
29@keyframes moveUp1 { 100% { transform:translateY(400px); } }
30@keyframes moveUp2 { 100% { transform:translateY(800px); } }
31@keyframes moveUp3 { 100% { transform:translateY(1200px); } }
32@keyframes moveUp4 { 100% { transform:translateY(1600px); } }
33@keyframes moveUp5 { 100% { transform:translateY(2000px); } }
34@keyframes moveUp6 { 100% { transform:translateY(2400px); } }
35@keyframes moveUp7 { 100% { transform:translateY(2800px); } }

javascript
1 var x, y;   // box の座標
2
3    // 移動   1=上, 2=下
4    function move(direct) {
5
6        const objBox = document.getElementById("box");
7        const cssStyle = window.getComputedStyle(objBox);
8        y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
9
10        let anim = '';
11        let divno = 0;    　// 変更後の表示位置
12        switch (direct) {
13            case 1: 
14                if (y >= -2400) {
15                    anim = 'moveDown'; 
16                    divno = ((y / -400) + 1);    　// 変更後の表示位置
17                }
18                break;
19            case 2: 
20                if (y <= -400) {
21                    anim = 'moveUp';
22                    divno = ((y / -400) - 1);    　// 変更後の表示位置
23                }
24                break;
25        }
26
27        if (anim !== '') {
28            document.getElementById('divno').selectedIndex = divno;    // コンボボックスの値変更
29            objBox.style.animationDuration = '1s';        // アニメの実行速度設定
30            objBox.style.animationName = anim;  // アニメ開始
31            btnsDisabled(true); // ボタン無効化
32        }
33    }
34
35    // コンボボックス変更時
36    function selected() {
37        const objBox = document.getElementById("box");
38        const cssStyle = window.getComputedStyle(objBox);
39        y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
40
41        let anim = '';
42        let divnofrom = (y / -400);　// 現在の表示位置
43        let divnoto = document.getElementById('divno').selectedIndex;　// 移動先の表示位置
44        let move = 0;    // 移動距離
45        if (divnofrom < divnoto){
46            move = (divnoto - divnofrom);
47            anim = 'moveDown' + move;
48        }else if (divnofrom > divnoto){
49            move = (divnofrom - divnoto);
50            anim = 'moveUp' + move;
51        }
52
53        if (anim !== '') {
54            objBox.style.animationDuration = move + 's';    // アニメの実行速度設定
55            objBox.style.animationName = anim;  // アニメ開始
56            btnsDisabled(true); // ボタン無効化
57        }
58    }
59
60    // animation 終了時の処理
61    document.addEventListener('animationend', () => {
62        const objBox = document.getElementById("box");
63        const cssStyle = window.getComputedStyle(objBox);
64        const arr = cssStyle.transform.match(/((.*))/)[1].split(",");     // 文字列 matrix(a, b, c, d, cx, cy) を分解
65        y += parseInt(arr[5]);  // transform.y の値を加える
66
67        objBox.style.transform = '';        // アニメした transform を消す
68        objBox.style.top = y + 'px';
69        objBox.style.animationName = '';    // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
70
71        btnsDisabled(false);    // ボタン有効化
72    });
73
74    // 矢印ボタンの有効化/無効化
75    function btnsDisabled(arg) {
76        let btns = document.getElementsByTagName("input");
77        for (let i = 0; i < btns.length; i++) {
78            btns[i].disabled = arg;
79        }
80        document.getElementById('divno').disabled = arg;    // コンボボックス
81    }

yambejp

2020/10/17 14:20

丸投げ過ぎてなにを聞きたいのかわかりません動作も確認できないのでまずはどこか動作が確認できるサイトに動くソースをアップして、追加したい機能を説明するかもっと質問を最低限のソースにしぼって質問することをおすすめします

vfxl9827

2020/10/17 16:35

一応最低限です。上記の構文はスロットのようにスライドとまるアニメーションです。このアニメーション終了後にさらにアニメーション動作を動作させる方法を聞きたいです。

Lhankor_Mhy

2020/10/21 06:25

// animation 終了時の処理の部分がそれにあたるのではないかな、と思うのですが、違うのですか？

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

回答1件

ベストアンサー

どの要素に対してどういう動きを付けたいかわかりませんが、cssとjsに以下を追加すると、アニメーション終了時に起動することはできますよ。
繰り返しのアニメーションが必要であれば、適宜attributeを消してあげると再帰性がつけられますよ。

css
1*[rel="endmode"]{
2  animation: endmove 1s ease 0s infinite alternate;
3}

js
1// animation 終了時の処理
2    document.addEventListener('animationend', () => {
3        const objBox = document.getElementById("box");
4        const cssStyle = window.getComputedStyle(objBox);
5        const arr = cssStyle.transform.match(/((.*))/)[1].split(",");     // 文字列 matrix(a, b, c, d, cx, cy) を分解
6        y += parseInt(arr[5]);  // transform.y の値を加える
7
8        objBox.style.transform = '';        // アニメした transform を消す
9        objBox.style.top = y + 'px';
10        objBox.style.animationName = '';    // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
11
12        btnsDisabled(false);    // ボタン有効化
13
14        objBox.setAttribute("rel" , "endmode");  // この行を追加
15    });