我有一个CSS过渡,可以在悬停时移动元素,并且还有一个在悬停时旋转该元素的动画。动画上有一个延迟,等于过渡持续时间,以便在它到达正确位置后开始动画。这很好用,但是当我们鼠标离开时,动画停止,但它不会返回到初始状态。
请问是否可能在鼠标离开并且动画结束后使其回到初始状态?
你可以在这里看到示例:http://codepen.io/jhealey5/pen/zvXBxM 简化代码如下:
请问是否可能在鼠标离开并且动画结束后使其回到初始状态?
你可以在这里看到示例:http://codepen.io/jhealey5/pen/zvXBxM 简化代码如下:
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
transform: translateY(-60px);
animation-name: rotate;
animation-duration: 1s;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
transition: .5s;
}
@keyframes rotate {
from {
transform: translateY(-60px) rotate(0);
}
to {
transform: translateY(-60px) rotate(-90deg);
}
}
transition
中使用bottom
,并且仅在rotate
中使用animation
,就像这个片段中所示。我不确定这种方法是否适合您的需求。如果适合,请告诉我,我会将其添加为答案。 - Harry