首页 文章

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

提问于
浏览 次
1

是否有可能使用CSS过渡，在其运动的前半部分中稍微偏离水平倾斜（旋转）一个元素 - 并且在下半部分到达其运动结束时将其倾斜回水平？我不想要360度旋转 . 稍微倾斜，然后再向后倾斜 .

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

tilt during motion

通过观察可以最好地证明这个问题 . 这是一个小提示，显示了我想要实现的目标 - 但我想通过CSS转换实现它，而不是JavaScript：

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

当你运行它时，请密切注意灰色框 . 它在运动过程中倾斜了一点，然后在中途反转它的倾斜 - 所以当它休息时，它不再倾斜 .

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

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

谢谢 .

css css3 css-transitions

3 回答

  • 0

    我知道了！

    解决方案是使用具有关键帧的CSS动画，该关键帧在其通过的50％时转换旋转（例如，转换为约8deg），但在结束时将旋转返回到0deg . 这很甜蜜 .

    这是关于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;
}
    回复于
  • 0

    你可以这样做 . http://cdpn.io/sIxFA

    显然，您可以根据需要平滑旋转，并在点击时添加旋转类 .

    回复于
  • 0

    这将是它的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;
    }
}
    回复于

相关问题