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

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

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

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

CSS

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

Q&A

解決済

1回答

23974閲覧

animate.cssで一定間隔あけてループさせたい

castail

総合スコア117

CSS3

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

CSS

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

0グッド

0クリップ

投稿2015/07/01 11:46

animate.cssのみで特定要素をバウンドアニメーションでループさせています。

lang

1<img src="hoge.png" class="animated bounce hoge-animation infinite">

lang

1 2 @-webkit-keyframes bounce { 3 0%, 20%, 53%, 80%, 100% { 4 -webkit-animation-timing-function: cubic-bezier(0.115, 0.210, 0.155, 0.250); 5 animation-timing-function: cubic-bezier(0.115, 0.210, 0.155, 0.250); 6 -webkit-transform: translate3d(0,0,0); 7 transform: translate3d(0,0,0); 8 } 9 10 40%, 43% { 11 -webkit-animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 12 animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 13 -webkit-transform: translate3d(0, -10px, 0); 14 transform: translate3d(0, -10px, 0); 15 } 16 17 70% { 18 -webkit-animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 19 animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 20 -webkit-transform: translate3d(0, -5px, 0); 21 transform: translate3d(0, -5px, 0); 22 } 23 24 90% { 25 -webkit-transform: translate3d(0,-1px,0); 26 transform: translate3d(0,-1px,0); 27 } 28 } 29 30 @keyframes bounce { 31 0%, 20%, 53%, 80%, 100% { 32 -webkit-animation-timing-function: cubic-bezier(0.115, 0.210, 0.155, 0.250); 33 animation-timing-function: cubic-bezier(0.115, 0.210, 0.155, 0.250); 34 -webkit-transform: translate3d(0,0,0); 35 transform: translate3d(0,0,0); 36 } 37 38 40%, 43% { 39 -webkit-animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 40 animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 41 -webkit-transform: translate3d(0, -10px, 0); 42 transform: translate3d(0, -10px, 0); 43 } 44 45 70% { 46 -webkit-animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 47 animation-timing-function: cubic-bezier(0.255, 0.050, 0.355, 0.060); 48 -webkit-transform: translate3d(0, -5px, 0); 49 transform: translate3d(0, -5px, 0); 50 } 51 52 90% { 53 -webkit-transform: translate3d(0,-1px,0); 54 transform: translate3d(0,-px,0); 55 } 56 } 57 58 .bounce { 59 -webkit-animation-name: bounce; 60 animation-name: bounce; 61 -webkit-transform-origin: center bottom; 62 transform-origin: center bottom; 63 } 64 65 .hoge-animation{ 66 -webkit-animation-duration:0.7s; 67 animation-duration: 0.7s; 68 -webkit-animation-delay: 1s; 69 animation-delay: 1s; 70 } 71

このままだと開始されたアニメーションが間髪入れず繰り返されるのですが、
1回のアニメーション完了後3秒停止させて次のアニメーションを開始させたいです。

ご教授のほどよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSSだけで実装するとなるanimation-iteration-count: infinite にしてanimation-durationに3秒追加してそれに合わせて各キーフレームの%を計算しなおして指定するのが現実的かなと思います。

0.7s+3sが100%とした時に0.7sが何%になるか計算して、その割合を100%として元のキーフレームの%から3.7sだと全体の何%になるか計算すれば良さそうです。

参照
css3 - CSS animation with time interval - Stack Overflow

投稿2015/08/08 15:46

編集2015/08/08 15:57
KiKiKi_KiKi

総合スコア596

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

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

castail

2015/08/10 00:49

ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問