是否有可能,使用 CSS 过渡,在其移动的前半部分倾斜(旋转)一个元素稍微偏离水平方向 - 并在后半部分将其倾斜回水平,因为它到达其移动的终点?我不想要 360 度旋转。稍微倾斜一下,然后再向后倾斜。
这是我脑海中过渡的开始、中间和结束的图片:
这个问题最好通过观看来证明。这是一个 fiddle ,它显示了我想要实现的目标——但我想用 CSS 转换来实现它,而不是 JavaScript:
http://jsfiddle.net/bmorearty/S5Us6/22/
运行此程序时,请仔细观察灰色框。它在运动过程中稍微倾斜,然后在中途反转倾斜 - 所以当它停止时,它不再倾斜。
我希望整个 Action 发生在从一种状态到另一种状态的单一转换中,只需将一个类添加到一个元素——而不是在两个转换中发生,因为这需要我在一个状态的结束和下一个。
我怀疑答案会包含 transition-delay
和/或 @keyframes
.
谢谢。
最佳答案
这将是它的 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;
}
}
关于CSS3 过渡 : tilt/rotate slightly while moving, 然后恢复为水平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15009176/