質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1097閲覧

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

vfxl9827

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/10/17 13:43

各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 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/10/17 14:20

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

2020/10/17 16:35

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

2020/10/21 06:25

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

回答1

0

ベストアンサー

どの要素に対してどういう動きを付けたいかわかりませんが、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 });

投稿2020/10/25 09:27

geta

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問