html - 无法在旋转 css 中进行平滑旋转

Question

我正在尝试用火箭平稳着陆，但我无法进行旋转以使着陆位置平稳，你们能帮我解决这部分代码吗？

@keyframes rocket{
	0%{
		transform:translate(-10vw);
	}
	40%{
		transform:translate(40vw);

	}
	70%{
		transform:translate(70vw, -15vw) rotate(-90deg);
	}
	100%{
		transform:translate(70vw, 0) rotate(-90deg);
	}
}

.rocketA{
	margin-top: 150px;
	width: 80px;
	height: 40px;
	background-color: pink;
	animation-name: rocket;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
}

<div class='rocketA'></div>

如果有人觉得这对这里有帮助，那就是我发现的解决方案，让它变得更好，感谢所有帮助。

解决方案

@keyframes rocket {
  0% {
    transform: translate(-10vw);
  }
  52% {
    transform: translate(45vw);
  }
  52% {
    transform: translate(45vw, -0vw) rotate(-5deg);
  }
  54% {
    transform: translate(48vw, -0.5vw) rotate(-10deg);
  }
  56% {
    transform: translate(51vw, -1vw) rotate(-15deg);
  }
  58% {
    transform: translate(54vw, -1.5vw) rotate(-20deg);
  }
  60% {
    transform: translate(57vw, -2vw) rotate(-25deg);
  }
  62% {
    transform: translate(60vw, -2.5vw) rotate(-30deg);
  }
  64% {
    transform: translate(63vw, -3vw) rotate(-35deg);
  }
  66% {
    transform: translate(66vw, -3.5vw) rotate(-40deg);
  }
  68% {
    transform: translate(69vw, -4vw) rotate(-45deg);
  }
  70% {
    transform: translate(72vw, -4.5vw) rotate(-50deg);
  }
  72% {
    transform: translate(75vw, -5vw) rotate(-55deg);
  }
  74% {
    transform: translate(78vw, -5.5vw) rotate(-60deg);
  }
  76% {
    transform: translate(81vw, -6vw) rotate(-65deg);
  }
  78% {
    transform: translate(83vw, -6.5vw) rotate(-70deg);
  }
  80% {
    transform: translate(85vw, -7vw) rotate(-75deg);
  }
  82% {
    transform: translate(88vw, -7.5vw) rotate(-80deg);
  }
  84% {
    transform: translate(91vw, -8.5vw) rotate(-85deg);
  }
  86%, 96% {
    transform: translate(94vw, -9vw) rotate(-90deg);
  }
  96%, 100% {
    transform: translate(94vw, 0) rotate(-90deg);
  }
  
}

.rocketA {
  margin-top: 100px;
  width: 80px;
  height: 40px;
  background-color: pink;
  animation-name: rocket;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
}

<div class='rocketA'></div>

Answer 1

使用animation-timing-function: linear;

演示

@keyframes rocket{
	0%{
		transform:translate(-10vw);
	}
	40%{
		transform:translate(40vw);

	}
	70%{
		transform:translate(70vw, -15vw) rotate(-90deg);
	}
	100%{
		transform:translate(70vw, 5vw) rotate(-90deg);
	}
}

.rocketA{
	margin-top: 150px;
	width: 80px;
	height: 40px;
	background-color: pink;
	animation-name: rocket;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
}

<div class='rocketA'></div>