主页 / user-336231

xSkanavi's questions

Martin Hope
xSkanavi
Asked: 2020-04-27 01:43:05 +0800 CST
  • 2

) 我们需要以下动画：当你将鼠标悬停在一个元素上时，你需要它跳跃 10px（有条件），从顶部反弹 5px（也有条件），然后返回 10px，移动光标后，执行相同，仅在下面。下降，反弹 5px，然后再次下降

.item {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px black;
    background-color: yellowgreen;
}

.item:hover {
    animation: swing 0.5s ease;
    animation-fill-mode: forwards;
}

@keyframes swing {
    33% {
        transform: translateY(-10px);
    }
    66% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(-10px);
    }
}
<div class="item"></div>

到目前为止，我只在悬停时完成了操作，但在撤回时我还没有在 css 上找到方法

css-animation