1

I was discussing with someone the ability for CSS3 to do animations upon click and hover and I decided to make a little test to show them. I decided to do a bit of boundary pushing and made it so that when you hovered over the animation happened, and when you un-hovered it waited 3 seconds and then ran the animation to put it back.

The problem however is that when the page loads, it runs the "un-hover" animation.

Any ideas for getting around this or another method that's better?

What the below code does is when you hover over the red box it animates is blue. When you un-hover is animates it back red again after 3 seconds. Both of them calculate to a 1 second animation time.

I know this could be fixed with one very simple line of JavaScript, but I'm only interested in seeing if there's a CSS answer.

@-webkit-keyframes makeblue {
  0% {
    background: red;
  }
  100% {
    background: blue;
  }
}
@keyframes makeblue {
  0% {
    background: red;
  }
  100% {
    background: blue;
  }
}
@-webkit-keyframes makered {
  0% {
    background: blue;
  }
  75% {
    background: blue;
  }
  100% {
    background: red;
  }
}
@keyframes makered {
  0% {
    background: blue;
  }
  75% {
    background: blue;
  }
  100% {
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: makered 4s;
  animation: makered 4s;
}
div:hover {
  -webkit-animation: makeblue 1s;
  animation: makeblue 1s;
  background: blue;
}
<div></div>

EDIT 1

Does anyone know if this type of functionality exists, or even potentially planned for the future?:

@keyframes makeblue {
   0% {
     background: [CurrentValue];
   }
   100% {
     background: blue;
   }
}

Having this would be able to fix the problem. If this doesn't exist, I think it should :).

Jamie Barker
  • 8,145
  • 3
  • 29
  • 64
  • `animation-delay` ? - https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay – Paulie_D Aug 04 '15 at 15:26
  • I did try that however that just meant it went immediately back to red and then 3 seconds later did a blue to red animation. If you have an idea to make it work though, great :). – Jamie Barker Aug 04 '15 at 15:28
  • @JamieBarker: As far as I know it is not possible to avoid it on load without using JS. – Harry Aug 04 '15 at 15:42
  • Something similar I've created: http://jsfiddle.net/6x8g6bLk/5/. It means you can have a sub-menu abstracted from the main menu and still be able to get to it with pure CSS. Still got the same problem, but less of an issue. – Jamie Barker Aug 04 '15 at 16:25
  • You can't do it without js for now. http://stackoverflow.com/questions/10995165/css-opposite-of-hover-on-mouse-leave – devellopah Aug 04 '15 at 18:29

1 Answers1

1

If you are dealing with background or simple css only (not a keyframe animation), you can have it with transition delay, check it out at jsfiddle!:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition:background-color 0.25s 3s linear;
}

div:hover {
    background-color:blue;
    transition:background-color 0.25s linear;
}
Jimba Tamang
  • 1,275
  • 15
  • 17
  • I don't think that will work for this though will it? http://jsfiddle.net/6x8g6bLk/5/ - This example actually has some real world benefits if it could work. The background colour div was really just a short example :). +1 for "outside the box" answer though. – Jamie Barker Aug 05 '15 at 07:48
  • ok then here you go: https://jsfiddle.net/jimbatamang/zsLencLa/3/I am using @keyframe gap technique to get this feature. The same methods have been used in the above jsfiddle which you attached and I have used this method to develop this site as well: http://getace.tv/ (almost css only animation) – Jimba Tamang Aug 05 '15 at 22:34
  • That fiddle is exactly the same as my original one, and has the same problem: http://jsfiddle.net/6x8g6bLk/ – Jamie Barker Aug 06 '15 at 08:20
  • Agree. We need sort of js to register hover state or hoverout state. You can still play with "animation-play-state:running;" should be kind of trick somewhere. – Jimba Tamang Aug 07 '15 at 02:02