Question

你好，我对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);
    }
}

Answer 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>

Answer 2

将光标移到光标上方时要举升的标题已消失。这个事实会立即停止动画，因为悬停规则不再有效。标头返回其位置。然后，重复这些动作。

悬停效果动画出现故障

2 个答案: