web-dev-qa-db-ja.com

CSSローリングボールアニメーションの位置

一般情報
私はビンゴゲームに取り組んでいます。現在、CSSのローリングボールアニメーションを作成しようとしています。アイデアは、ホイールから落ちるボールをシミュレートし、右から左に転がらせることです。

問題
アニメーションは正常に機能しています。ただし、「ドロップイン」の位置はdivを基準にしています。この結果、この位置は、新しいボールが落ちるたびに75ピクセル右に動き続けます。

私が試したソリューション
-ボールに絶対位置を与えます。これで問題は解決しますが、キーフレームがleft: 0%で終わるため、各ボールが前のボールを覆います。これは望ましくありません。
-Javascriptソリューションを検索して、前のボールの+ 75pxで終了するようにキーフレームを変更できるかどうかを確認します。残念ながら、この方法でアニメーションを操作することは不可能に思えるか、またはそれを行う方法を見つけることができませんでした。

だから今私は誰かがこの問題の解決策を見つけるのを助けることができることを望んでいます。

編集：jQueryはここでは使用されていないため、タグ付けしませんでしたが、jQueryを使用するソリューションは完全に問題ありません。

[〜＃〜] mcve [〜＃〜]

const timer = setInterval(rollBall, 2000);
var ballNumber = 1;

function rollBall(){
        if(document.getElementById('ball-'+(ballNumber-1))){
        document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
  }
        let html = '<div id="ball-'+ballNumber+'" class="ball ball-animation">';
  html += '<p class="ball-number">';
  html += ballNumber;
  html += '</p></div>';
  
  document.getElementById('balls').innerHTML += html;
  
  ballNumber++;
  
  if(ballNumber > 10) {
        clearInterval(timer);
    document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
  }
}
.ball {
        display: block;
        position: relative;
        width: 75px;
        height: 75px;
        background: red;
        border-radius: 50%;
  background: -webkit-radial-gradient(25px 25px, circle, red, #000);
        background: -moz-radial-gradient(25px 25px, circle, red, #000);
        background: radial-gradient(25px 25px, circle, red, #000);
        /*position: absolute;*/
        float: left;
}

.ball-number {
        top: -34px;
        left: 25px;
        font-size: 45px;
        color: #fff;
        position: absolute;
}

.ball-animation {
        -webkit-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
        -moz-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
        -ms-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
        animation: spin 1750ms linear infinite, moveRightToLeft 2s linear;

        -webkit-transition: all 1.75s ease;
        transition: all 1.75s ease;
}

@keyframes spin {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
}

@keyframes moveRightToLeft {
        0% { top: -50px; left: 200px; }
        10% { top: -40px; left: 180px; }
        20% { top: -25px; left: 150px; }
        30% { top: 0px; left: 100px; }
        100% { left: 0%; }
}
<div id="balls"></div>
javascriptcsscss-animations
3
icecub

これはCSSのみのソリューションで、中間のdiv zoneを使用してボールの動きを処理します。

この要素にはさまざまなサイズがあるため、キーフレームをパーセンテージで機能するように設定し、同じ原点を維持しながら、異なる終点に合わせて調整できます。

.container {
    width: 600px;
    height: 350px;
    border: solid 1px red;
    position: relative;
}

.zone {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 40px;
    left: 40px;
    border: solid 1px green;
    animation: move 3s linear infinite;
}

.zone:nth-child(2) {
    left: calc(40px * 2);
}

.zone:nth-child(3) {
    left: calc(40px * 3);
}
.zone:nth-child(4) {
    left: calc(40px * 4);
}

.ball {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: blue;
    right: 0px;
    position: absolute;
}

@keyframes move {
    from {transform: translate(0px, 0px);}
    50% {transform: translate(-100px, 100%);}
    to {transform: translate(-100%, 100%);}
}
<div class="container">
  <div class="zone">
    <div class="ball">1</div>
  </div>
  <div class="zone">
    <div class="ball">2</div>
  </div>
  <div class="zone">
    <div class="ball">3</div>
  </div>
  <div class="zone">
    <div class="ball">4</div>
  </div>
</div>
2
vals