やりたいこと
「四角」を、position: absolute;
してある「丸」の中央に移動するようにしたい。
ブラウザの幅が変わっても、絶対に「丸」の 中央 に移動するようにアニメーションしたいです。
問題点
↑こちらデモです。
今は手動調整なので、 result の幅を変えると中央に行かなくなります。
あと、アニメーションの秒数を遅くすると分かりますが、「四角」が移動中にブラウザの幅に当たって跳ね返ってしまうので、これもなくしたいです。
つまり要点は、
- 可変しても、「四角」を特定の位置 (「丸」の中央 ) に移動したい
- ブラウザの画面に当たって跳ね返ってしまうのを無効にしたい
です。
コード ( JSFiddleと全く同じ )
html
1<div class="round"></div> 2<div class="base"> 3 <div class="box"></div> 4</div> 5 6<button>ONE MORE</button>
css
1@keyframes inhale { 2 from { 3 opacity: 1; 4 transform-origin: 50% 50%; 5 transform: scale(1) translate(0%, 0%); 6 } 7 to { 8 opacity: 0; 9 transform-origin: 96% 70%; 10 transform: scale(0) translate(70%, 70%); 11 } 12} 13 14.box { 15 position: absolute; 16 width: 90%; 17 height: 90%; 18 background: rgb(60, 0, 170); 19 top: 0; 20 right: 0; 21 bottom: 0; 22 left: 0; 23 margin: auto; 24} 25 26.inhale { 27 animation: inhale 1s cubic-bezier(0, 1, .56, 1); 28} 29 30.base { 31 width: 100%; 32 height: 100vh; 33 background: rgb(32, 38, 46); 34} 35 36.round { 37 position: absolute; 38 bottom: 10px; 39 right: 10px; 40 width: 200px; 41 height: 200px; 42 border-radius: 50%; 43 background: rgb(0, 176, 230); 44}
jQuery
1$(function() { 2 $("button").on('click', function() { 3 $(".box").addClass('inhale').on('animationend', function() { 4 $(this).removeClass('inhale'); 5 }); 6 }); 7});
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー