主页 / 问题 / 975378
Accepted
xSkanavi
Asked:2020-04-27 01:43:05 +0800 CST2020-04-27 01:43:05 +0800 CST

悬停后的动画

  • 772

) 我们需要以下动画：当你将鼠标悬停在一个元素上时，你需要它跳跃 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

1 个回答

  1. Best Answer

    这可以在不@keyframes使用transition-timing-function的情况下完成

    关于这种在此处输入图像描述

    transition-timing-function: cubic-bezier(.6,1.48,.34,-0.77)

    .item {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px black;
    background-color: yellowgreen;
    transition: 300ms;
    transition-timing-function: cubic-bezier(.6,1.48,.34,-0.77)
}

.item:hover {
    transform: translateY(-20px);
}
    <div class="item"></div>

    但是在这个站点上，您可以根据自己的喜好构建曲线，您也可以为此使用 chrome 中的调试器

    在此处输入图像描述

    • 0

相关问题