CODEWITHSUNDEEP
cssanimationdelaykeyframe
Jamie Barker
Jamie Barker

Reputation: 8246

Animation delay on CSS3 keyframe with just CSS?

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

Upvotes: 1

Views: 611

Answers (1)

Jimba Tamang
Jimba Tamang

Reputation: 1335

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

Upvotes: 1

Related Questions