悬停效果动画有问题答案

【问题标题】：Hover effect animation is glitchy悬停效果动画有问题
【发布时间】：2020-09-11 02:52:30
【问题描述】：

您好，我对 css 和 html 非常陌生，我正在尝试使用关键帧制作 css 悬停效果只是一个简单的动画，不幸的是，当我尝试悬停时，动画有点停止，所以我只是想知道我能做些什么来解决这个问题，当我悬停时动画有点小故障，所以我想我需要等到动画结束再次悬停。请帮我。这是我的 CSS 代码

body{
    background: #C33764;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1D2671, #C33764);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.title{
    font-size: 80px;
    font-family: 'Passion One', cursive;
    color:white;
    letter-spacing: 10px;
    text-shadow: 1px 1px 11px black;
    position: fixed;
    top: 50%;
    left: 30%;
    margin-top:-50px;
    margin-left: -100px;
}

.title:hover{
    animation-name: GoUp;
    animation-duration: 1s;
}

@keyframes GoUp{
    from{
        transform: translateY(180px);

    }

    to{
        transform: translateY(-180px);
    }
}

【问题讨论】：

这与 javascript 有什么关系？请不要标记不相关的产品

标签： javascript html css hover

【解决方案1】：

它在您身上出现了故障，因为您将鼠标悬停在同时也是触发器的元素上，并且它的动画远离您的鼠标。我已经设置了一个示例，显示将鼠标悬停在静止元素上会顺利触发动画。根据我的经验，使用固定元素作为动画触发器是使用:hover 时最简单的技术。

body{
    background: #C33764;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1D2671, #C33764);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.title{
    font-size: 80px;
    font-family: 'Passion One', cursive;
    color:white;
    letter-spacing: 10px;
    text-shadow: 1px 1px 11px black;
    position: fixed;
    top: 50%;
    left: 30%;
    margin-top:-50px;
    margin-left: -100px;
}
.hover-me {
  color: green;
  font-family: sans-serif;
  background-color: white;
  display: inline-block;
  padding: 0.5rem 1.4rem;
}
body:hover .title {
    animation-name: GoUp;
    animation-duration: 1s;
}

@keyframes GoUp{
    from{
        transform: translateY(180px);

    }

    to{
        transform: translateY(-180px);
    }
}

<p class="hover-me">HOVER OVER ME</p>
<div class="title">
  HERE IS A TITLE
</div>

【讨论】：

【解决方案2】：

当您将光标移到光标上时，您尝试解除的标题已消失。这个事实立即停止动画，因为悬停规则不再有效。标题返回到它的位置。然后，重复这些动作。

【讨论】：