Question

我希望在到达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
我错过了什么？

Answer 1

您可以尝试这样的事情。我们的想法是在帧中强制使用相同的旋转值，这样它在翻译时就不会旋转，你可以在两个关闭帧之间改变旋转。

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

到达给定点后的旋转

1 个答案: