我有一个css过渡，可以在悬停时移动元素，也有一个动画，也可以在悬停时旋转元素。动画上有一个等于过渡持续时间的延迟，因此在过渡到正确位置后动画就开始播放。而且效果很好，但是，当我们将鼠标移开时，动画会停止，但不会向下过渡。
鼠标移开并结束动画后，是否可以让它过渡回来？
您可以在此处查看示例：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);
}
}
我已经分叉了您的项目并对其进行了修改，使其可以正常工作。你可以在这里找到它。
我更改的内容如下：
我给白方的起始位置top: 150px，让它上hover的div，拿到top: 0。跨度为a transition: top .5s，随即top: 0;悬停并返回到top: 150px;鼠标离开时。
我已将其translateY(-60px);从动画中删除，因为这将在animation开始播放时将其进一步向上移动。
这是您的新CSS：
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
top: 0px;
animation: rotate 1s infinite .5s alternate;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
top: 150px;
margin: auto;
transition: top .5s;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-90deg);
}
}
编辑：问题在于动画是基于时间的，而不是基于动作的，这意味着一旦触发动画，计时器就会开始运行，并且它将keyframes一直运行直到设置的时间过去。悬停和悬停没有效果，但可以过早停止计时器，但是此后动画将不会继续（或想要反转）。transition基于操作，这意味着每次操作（例如:hover）发生时都会被触发。开启:hover，这意味着需要0.5秒top:0，当悬停结束时，您需要0.5秒top:150px。
我希望以上添加是有意义的:)
如您所见，由于您可以animation-name:将其合并为一行，因此我也对您的内容进行了一些整理。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句