CSS animation makes reverse animation slower

Question

• How to do on the mouse, leaving the first animation of the div animation back, the text gradually decreases not instantly?

• How to make reverse playback speed 5 times slower?

Below is the fiddle :

.two {
  font-size: 0;
}
.one:hover + .two {
  text-align: center;
  -webkit-animation: zoom_in 0.5s ease 0s forwards;
  -moz-animation: zoom_in 0.5s ease 0s forwards;
  -o-animation: zoom_in 0.5s ease 0s forwards;
}
@-webkit-keyframes zoom_in {
  from {
    font-size: 0;
  }
  to {
    font-size: 20px;
  }
}
@-moz-keyframes zoom_in {
  from {
    font-size: 0;
  }
  to {
    font-size: 20px;
  }
}
@-o-keyframes zoom_in {
  from {
    font-size: 0;
  }
  to {
    font-size: 20px;
  }
}

<div class="one">
  Hover
</div>
<div class="two">
  Hello World!
</div>

Run code

Answer 1

In your example, only the animation class :hoverhas animation. When the cursor leaves the first div, the freezing state immediately remains and no animation is specified. Animation must also be set in the classroom .two.

---

, , , CSS . transition.

:hover , div . :hover , div, div .

.two {
  font-size: 0;
}
.two {
  text-align: center;
  transition: font-size 2.5s; /* slower out */
}
.one:hover + .two {
  text-align: center;
  font-size: 20px;
  transition: font-size 0.5s; /* faster in */
}

<div class="one">
  Hover
</div>
<div class="two">
  Hello World!
</div>