Почему этот элемент оживляет задом наперед? - PullRequest
Новая
       9

Почему этот элемент оживляет задом наперед?

0 голосов
/ 05 декабря 2018

Я изучаю CSS-анимацию и немного застрял в чем-то.У меня все в основном работает, но первый шарик движется задом наперед, и я не понимаю, почему.Я перепробовал много разных вещей, таких как смена позиции перевода безуспешно.Какие-нибудь мысли?Класс первого воздушного шара, на который я ссылаюсь, это initialBalloon. 

html {
	box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
  box-sizing: inherit;
}
html, body { 
	margin:0; 
	padding:0; 
	overflow:hidden; 
	width: 100vw;
	height: 100vh;
}


.BalloonContainer {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.initialBalloon {
  position: absolute;
  /* moves initial position before animating */
  transform: translateX(100vw);
  top: 150px;
  animation: moveFirst 5s linear .2s;
  animation-iteration-count: 1;
  width: 150px;
}

.firstBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 150px;
  animation: move 5s linear 5s infinite;
  width: 150px;
}

.secondBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 200px;
  animation: move 8s linear 0s infinite;
  width: 150px;
}

.thirdBalloon {
  top: 250px;
  transform: translateX(-30vw);
  position: absolute;
  animation: move 11s linear 1s infinite;
  width: 150px;
}

@-webkit-keyframes move {
  0% {
    transform: translateX(-30vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
    
  }
}

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
	<div class="BalloonContainer">
		<div class="initialBalloon swingimage">
			<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="firstBalloon swingimage">
			<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_2p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_2" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="secondBalloon swingimage">
			<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_3p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_3" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="thirdBalloon swingimage">
			<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_4p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_4" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>	
	</div>

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Попробуйте этот измененный пример

только что изменился 

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
    transform: translateX(70vw) rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}


html {
	box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
  box-sizing: inherit;
}
html, body { 
	margin:0; 
	padding:0; 
	overflow:hidden; 
	width: 100vw;
	height: 100vh;
}


.BalloonContainer {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.initialBalloon {
  position: absolute;
  /* moves initial position before animating */
  transform: translateX(100vw);
  top: 150px;
  animation: moveFirst 5s linear .2s;
  animation-iteration-count: 1;
  width: 150px;
}

.firstBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 150px;
  animation: move 5s linear 5s infinite;
  width: 150px;
}

.secondBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 200px;
  animation: move 8s linear 0s infinite;
  width: 150px;
}

.thirdBalloon {
  top: 250px;
  transform: translateX(-30vw);
  position: absolute;
  animation: move 11s linear 1s infinite;
  width: 150px;
}

@-webkit-keyframes move {
  0% {
    transform: translateX(-30vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
    
  }
}

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
	transform: translateX(70vw) rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
<div class="BalloonContainer">
		<div class="initialBalloon swingimage">
			<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
	</div>
0 голосов
/ 05 декабря 2018

Кажется, что оно идет от 50vw до 0vw, а затем 100vw.Следовательно, почему это выглядит, чтобы идти назад.

Добавление translateX(75vw) (на полпути между 50 и 100) к отметке 50% для класса анимации moveFirst сработало для меня. 

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
    transform: translateX(75vw) rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
...