为什么此元素向后动画？

时间：2018-12-05 17:49:34

标签： css animation css-animations

我正在学习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 :(得分：2)

似乎从50vw到0vw，然后到100vw。因此，为什么它看起来会倒退。

将translateX(75vw)动画类的50%（介于50和100之间的一半）添加到moveFirst标记对我来说很有效。

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

答案 1 :(得分：0)

Try this changed example

just changed 

@-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>

相关问题
最新问题