到达给定点后的旋转答案

【问题标题】：Rotation after reaching given point到达给定点后的旋转
【发布时间】：2018-07-13 21:16:14
【问题描述】：

我想在图像/或元素到达keframe 断点中给出的位置后立即旋转它。旋转和动画一起应用。这里是HTML

<body>
<div class="container">

    <div class="box"></div>

</div>

这里是 CSS。

.container {
    background-color: lightgray;
    height: 600px;
    width: 800px;
    margin: auto;
 }

.box {
    height: 100px;
    width: 100px;
    // background-image: url("car.png");
    background-size:100px 100px;
    position: relative;
    top:40px; left: 620px;
    animation: Glider infinite 5s ease-in-out;
 }

@keyframes Glider {
    0% {
        top:40px; left:620px;        
    }
    25% {
        top:40px; left: 80px;
        transform: rotate(-90deg);
    }
    50%{
        top:400px; left: 80px;
        transform: rotate(-180deg);
    }
    75%{
        top:400px; left: 620px;
        transform: rotate(-270deg);
    }
    100%{
        top:40px; left: 620px;
        transform: rotate(-360deg);
   }
}

我想做的是将图像移动到 top:40px; left: 80px; 然后保持 rotate(-90deg) ，在应用旋转后移动到下一个点。希望这发生在每个转折点。链接：https://output.jsbin.com/hiyamirera/1
我错过了什么？

【问题讨论】：

标签： html css css-animations

【解决方案1】：

你可以试试这样的。这个想法是在帧中强制旋转相同的值，这样它就不会在平移时旋转，并且您可以更改 2 个关闭帧之间的旋转。

.container {
  background-color: lightgray;
  height: 600px;
  width: 800px;
  margin: auto;
}

.box {
  height: 100px;
  width: 100px;
  background: red;
  position: relative;
  top: 40px;
  left: 620px;
  animation: Glider infinite 5s ease-in-out;
}

@keyframes Glider {
  0% {
    top: 40px;
    left: 620px;
    transform: rotate(0);
  }
  25% {
    top: 40px;
    left: 80px;
    transform: rotate(0);
  }
  28% {
    transform: rotate(-90deg);
  }
  50% {
    top: 400px;
    left: 80px;
    transform: rotate(-90deg);
  }
  53% {
    transform: rotate(-180deg);
  }
  75% {
    top: 400px;
    left: 620px;
    transform: rotate(-180deg);
  }
  78% {
    transform: rotate(-270deg);
  }
  97% {
    top: 40px;
    left: 620px;
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

<div class="container">

  <div class="box"></div>

</div>

【讨论】：

谢谢你！我也尝试在近距离框架内，但在翻译图像之间停止旋转的想法并没有打动我！