CSS different unhover animation (CSS Zen Garden Example)

Question

Just saw this CSS-only animation on http://csszengarden.com/219/, and wanted to recreate the animation, which starts when you hover over the middle card i.e.

Normally the site provides a CSS stylesheet, but on this example I couldn't find any.

The hover animation part was just an animation which first translated the y-axis and then changed the perspective.

My problem is that I don't really know how the unhover part of this animation is working because first the card has to keep the end state of the hoveranimation and then it first translate on the y-axis and then it zooms out so it's not a reversed animation of the hovering.

It tried the approach of keyframes with from and to. This approach could start the unhoveranimation with the right end state of the hover, but it only can handle a single animation and not animations which are sequential. Moreover with using from and to the animation just jumps when you unhover before the animation ended.

Here is what i've got so far.

.parent {
  height: 1000px;
  width: 1000px;
  position: relative;
}

.child {
  height: 40px;
  width: 40px;
  left: 40%;
  border: medium solid black;
  position: absolute;
}

.parent:hover .child{
  animation: 3s in forwards;
}

@keyframes in {
  50% {
    transform: translate3d(0px, 100px, 0px);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 100px, 100px);
  }
}

user_12493648 · Answer

On :hover multiple styling properties are changed. The transition property can have a delay value like transition: property duration timing delay. In your example some properties have a delay and some don't so it looks like there are multiple transitions happening. Below is an example with changing left and top of a div. The left property has a delay of 1 second, top has no delay.

.banner {
  transition: top 1s linear, left 1s linear 1s;
  /*when hovered, move 100 down, after 1s move 100 right*/
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 150px;
  background-color: coral;
}

.banner:hover {
  top: 100px;
  left: 100px;
}


/*this is needed so you don't get flickering*/

.banner::before {
  content: '';
  height: 100px;
  width: 100%;
  position: absolute;
  top: -100px;
  left: 0;
}

Hello Stackoverflow!

CSS different unhover animation (CSS Zen Garden Example)

1 Answers