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秒停止させて次のアニメーションを開始させたいです。
ご教授のほどよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/10 00:49