Animate. CSS custom animation

The height of the animation exceeds the expected height when using animate. CSS

You can’t pass the test under these circumstances. What do you do?

<div class="fold-div animated " :class="{'slideInDown':foldDivHeightShow}"
</div>
Copy the code

The above code can know the use of slideInDown animation to see how he source code?

The slideInDown source code is translate3D (x,y,z) and translate3D (x,y,z)

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}
Copy the code

Custom animation;

.slideInDown3 {
  @keyframes slideInDown3 {
    from {
      transform: translate3d(0, -10%, 0);
      visibility: visible;
    }

    to {
      transform: translate3d(0, 2%, 0);
    }
  }

  animation-name: slideInDown3;
}
Copy the code

use

<div class="fold-div animated " :class="{'slideInDown3':foldDivHeightShow}"
</div>
Copy the code

Ok, the effect is obvious