CODEWITHSUNDEEP
htmlcssanimationhover
AntlerFox
AntlerFox

Reputation: 180

CSS hover animations playing on page load

I've been playing around with animations on hover with pure CSS, applying the animation to element:hover and then the same animation to the regular element in reverse so that when the mouse is moved away the element returns to it's original state, this works fine however any animation that is fired when a user moves their mouse away from an element also runs on page load. I understand why this happens, but I would like to know if there's a way to stop it at all? Preferably not using JS but I don't see how that would be possible really

Current code being used, simple animations on hover:

.image{
  animation: hoverout 1s ease-in-out forwards;
}

.image:hover{
  animation: hover 1s ease-in-out forwards;
}

@keyframes hover{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 0.5;
  }
}

@keyframes hoverout{
  0%{
    opacity: 0.5;
  }

  100%{
    opacity: 0;
  }
}

Upvotes: 0

Views: 1265

Answers (2)

TTCC
TTCC

Reputation: 1055

Well, this is a problem.

1) you can use visibility to solve it. Try this:

setTimeout(function(){
   $('.image')[0].style.visibility = 'visible';
}, 1000)

element {
    visibility: hidden;
}

element:hover {
    visibility: visible;
}


$(document).ready(function ($) {
   setTimeout(function(){
       $('.image')[0].style.visibility = 'visible';
   }, 1000)
});
.image-parent {
    border: 1px solid;
    width: 100px;
    height: 100px;
}

.image-parent .image {
    width: 100%;
    height: 100%;
    background: red;
    visibility: hidden;
    opacity:0;
    animation: hoverout 1s ease-in-out;
}

.image-parent:hover .image {
    visibility: visible;
    animation: hover 1s ease-in-out forwards;
}

@keyframes hover {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes hoverout {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="image-parent">
    <div class="image"></div>
</div>

Here may help u.

2) If you are using animation and keyframe, u can replace them by transition and opacity. Eg:

element {
    opacity:0;
    transition:opacity 1s, transform 0.5s;
}

element:hover {
    opacity:1;
    transform : rotateX(90deg);
}

Here may help u.

.image-parent {
    border: 1px solid;
    width: 100px;
    height: 100px;
}
.image{
    width: 100%;
    height: 100%;
    border: 1px solid;
    background: red;
    opacity: 0;
    transition: opacity 1s;
}

.image:hover{
    opacity: 0.5;
}
<div class="image-parent">
    <div class="image"></div>
</div>

Upvotes: 0

Mitchel Jager
Mitchel Jager

Reputation: 445

You do not need to use animation and keyframes on such a simple hover. Use transition instead. A transition simply transitions between 2 points, in this case between the hover state and the non-hover state.

It would look something like this:

.image {
  opacity: 0;
  transition: opacity 300ms;
}

.image:hover {
  opacity: 1;
}

In this case I set the opacity to transition on hover. You can add more values to this with commas such as transition: opacity 300ms, color 300ms or simplify it by transitioning everything transition: all 300ms, although that will take more performance.

Upvotes: 1

Related Questions