CSS3 过渡：移动时稍微倾斜/旋转，然后恢复到水平答案

【问题标题】：CSS3 transition: tilt/rotate slightly while moving, then restore to horizontalCSS3 过渡：移动时稍微倾斜/旋转，然后恢复到水平
【发布时间】：2013-02-21 18:01:13
【问题描述】：

是否有可能，使用 CSS 过渡，在元素的前半部分移动时稍微倾斜（旋转）一个元素，并在后半部分将其倾斜到水平，因为它到达了移动的末端?我不想要 360 度旋转。稍微倾斜，然后再向后倾斜。

这是我想到的过渡的开始、中间和结束的图片：

这个问题最好通过观看来证明。这是一个显示我想要实现的小提琴，但我想用 CSS 转换来实现它，而不是 JavaScript：

http://jsfiddle.net/bmorearty/S5Us6/22/

运行此程序时，请仔细观察灰色框。它在运动时会倾斜一点，然后在中途反转它的倾斜度——所以当它静止时，它不再倾斜。

我希望整个动作发生在从一个状态到另一个状态的单个转换中，只需向元素添加一个类 - 而不是在两个转换中，因为这需要我将一个结束与开始计时下一个。

我怀疑答案会包含transition-delay 和/或@keyframes。

谢谢。

【问题讨论】：

它们被称为动画。它使用关键帧
P.S.我不担心浏览器的兼容性。如果某些浏览器简单地忽略旋转指令，我没问题，只要框最终出现在正确的位置。
这可能会帮助你...stackoverflow.com/questions/14857923/…

标签： css css-transitions

【解决方案1】：

这将是它的 css：

#card {
    padding: 2em;
    border: 1px solid gray;
    display: inline-block;
    position: relative;
    background-color: #eee;
    /*instead of infinite you can add a number of times you want it running*/
    animation: moving infinite 6s;

}
@keyframes moving {
    0%{
      margin: 0;
    }
  50% {
 -webkit-transform: rotate(45deg);
  }
  100% {
    margin: 50px;
    }
}

【讨论】：

谢谢！即使我想通了并且在看到您的答案之前仍在输入我的答案，但我还是要感谢您首先正确回答。

【解决方案2】：

你可以做这样的事情。 http://cdpn.io/sIxFA

显然，您可以随意平滑旋转，并在单击时添加旋转类。

【讨论】：

【解决方案3】：

我明白了！

解决方案是使用带有关键帧的 CSS 动画，当旋转完成 50% 时将其转换为旋转（例如，到大约 8 度），但在结束时将旋转返回到 0 度。挺甜的。

这是一个关于 JSBin 的演示：

http://jsbin.com/ogiqad/4/edit

（以下代码使用 -webkit，但您可以添加所有其他浏览器变体以使其在更多浏览器上运行。）

@-webkit-keyframes tilt-and-move {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    -webkit-transform: rotate(8deg);
  }
  100% {
    left: 100px;
    top: 100px;
  }
}

#card {
    position: relative;
}

#card.moved {
    left: 100px;
    top: 100px;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-name: tilt-and-move;
}

【讨论】：