仅用于 translate 属性的转换

【问题标题】：Transition only for translate property仅用于 translate 属性的转换
【发布时间】：2018-03-27 23:21:17
【问题描述】：

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

有什么建议吗？我更喜欢纯 CSS。

【问题讨论】：

先向我们提供您的代码。
还要决定你想要动画还是过渡......它们是两个不同的东西。
对于同一个元素，您不能只转换但不能旋转，我会将元素包装在 div/span 中并将转换应用于一个并旋转到另一个，这样你就可以更好地控制局势。
aeid - 您的解决方案似乎是最好的。我做到了，它只需要几行额外的代码。谢谢:)

标签： css animation css-transitions transform

【解决方案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);
    }
}

&lt;div class="object"&gt;&lt;/div&gt;

【讨论】：