仅用于翻译属性的过渡
答
除了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>
首先向我们提供您的代码。 – Krusader
还决定你是否想要动画或过渡......他们是两回事。 –
你不能只转换同一元素的平移但不旋转,我会将元素包装在div/span中,并将转换应用到另一个并旋转到另一个,这样你就可以更好地控制情况。 – aeid