Animation delay on CSS3 keyframe with just CSS?

Question

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 :).

animation-delay ? - developer.mozilla.org/en-US/docs/Web/CSS/animation-delay — Paulie_D
– Paulie_D, Commented Aug 4, 2015 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
– Jamie Barker, Commented Aug 4, 2015 at 15:28
@JamieBarker: As far as I know it is not possible to avoid it on load without using JS. — Harry
– Harry, Commented Aug 4, 2015 at 15:42
Something similar I've created: 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
– Jamie Barker, Commented Aug 4, 2015 at 16:25
You can't do it without js for now. stackoverflow.com/questions/10995165/… — devellopah
– devellopah, Commented Aug 4, 2015 at 18:29

Jimba Tamang · Accepted Answer · 2015-08-05 07:44:39Z

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

answered Aug 5, 2015 at 7:44

Jimba Tamang

1,33515 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jamie Barker Over a year ago

I don't think that will work for this though will it? 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.

Jimba Tamang Over a year ago

ok then here you go: 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: getace.tv (almost css only animation)

Jamie Barker Over a year ago

That fiddle is exactly the same as my original one, and has the same problem: jsfiddle.net/6x8g6bLk

Jimba Tamang Over a year ago

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.

Collectives™ on Stack Overflow

Animation delay on CSS3 keyframe with just CSS?

EDIT 1

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT 1

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related