Question

我想将块向上移动100像素，将其旋转360度，然后再降低到原始位置。我用下面的CSS代码。它会向上移动，但不会旋转。

html {
  height: 100%
}

body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.block {
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to top right, #0A3047, #104B70, #1870A7, #2195DD, #A4D6F5);
  border-radius: 10px;
  animation: jump 2s infinite;
}

@keyframes jump {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translateY(-100px);
  }
  40% {
    transform-origin: center center;
    transform: translateY(-100px) rotateZ(360deg);
  }
  80% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}

<div class="block"></div>

请参阅codepen：https://codepen.io/Prathu9/pen/EOJxEO?editors=1100

Answer 1

我认为您的问题是360度旋转完全等同于没有旋转，因此CSS似乎已经意识到这一点，并且由于开始状态和结束状态之间没有区别，因此不会发生动画。我想我可以通过将其旋转180度，然后再将其旋转180度来获得您想要的行为：

40%{
    transform-origin:center center;
    transform:translateY(-100px) rotateY(180deg);
}
41%{
    transform:translateY(-100px) rotateY(180deg);
}

html{
  height:100%
}
body{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:black;
}

.block{
  width:50px;
  height:50px;
  background-image:linear-gradient(to top right,#0A3047,#104B70,#1870A7 ,#2195DD ,#A4D6F5);
  border-radius:10px;
  animation:jump 2s infinite;
}

@keyframes jump{
  0%{
      transform:translate(0);
  }
  20%{
     transform:translateY(-100px);
  }
  40%{
      transform-origin:center center;
      transform:translateY(-100px) rotateY(180deg);
  }
  41%{
      transform:translateY(-100px) rotateY(180deg);
  }
  80%{
    transform:translateY(-100px)
      rotateY(360deg);
  }
  100%{
    transform:translateY(0px);
  }
}

<div class="block"></div>

向上旋转向下旋转

1 个答案: