CSS положение анимации катящегося мяча - PullRequest
Новая
       7

CSS положение анимации катящегося мяча

3 голосов
/ 28 мая 2020

Общая информация Я работаю над игрой Bin go. В настоящее время я пытаюсь создать анимацию катящегося мяча 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>

1 Ответ

2 голосов
/ 28 мая 2020

Это единственное решение 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>
...