CODEWITHSUNDEEP
javascripthtmlcsshover
Manuel Patiño
Manuel Patiño

Reputation: 43

Hover effect animation is glitchy

Hello I'm very new with css and html am trying to make a css hover effect with keyframes is just a simple animation that goes up unfortunately is all messy when I try to hover the animation kinda stops, so I'm just wondering what can I do to fix this issue the animation is kinda glitchy when I hover so I guess I need to wait until the animation ends to hover again. Please help me. This is my CSS Code

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);
    }
}

Upvotes: 0

Views: 1490

Answers (2)

Bjorn.B
Bjorn.B

Reputation: 1705

It's glitching out on you because you're hovering the element that is also the trigger, and it's being animated away from your mouse. I've set up an example that shows hovering over a stationary element will trigger the animation smoothly. In my experience, using a stationary element as an animation trigger is the most fool-proof technique when using :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>

Upvotes: 2

DiD
DiD

Reputation: 91

The title you are trying to lift when you move the cursor over the cursor is gone. This fact immediately stops the animation, because the hover rules no longer have effect. The header returns to its place. Then, these actions are repeated.

Upvotes: 1

Related Questions