Question

我有两个变换操作（旋转和平移），我想只进行转换（旋转必须是即时的）。

一些建议？我更喜欢纯粹的CSS。

Answer 1

除了animation-fill-mode之外，还可以使用关键帧达到所需的效果，以便在动画完成时保留计算出的样式。

.object {
  width: 50px;
  height: 50px;
  background-color: #F00;
  animation-fill-mode: forwards;
}

.object:hover {
  animation: move 1s;
  animation-fill-mode: forwards;
}


@keyframes move {
    0%   {
      transform: translateY(0px) rotate(0deg);
    }
    1% {
      transform: rotate(45deg);      
    }
    100% {
      transform: translateY(25px) rotate(45deg);
    }
}

<div class="object"></div>

仅转换属性的转换

1 个答案: