css transition doesn't work properly on my card div

Question

I am having issues figuring out what is wrong with my card div. I am trying to add in a little transition where the div pops up a little bit with a smooth animation but the transition doesn't work as it pops up instantly without any smooth animation.

.card-body {
  border-bottom: 10px solid #ea5455;
  border-left: 1px solid #ea5455;
  border-right: 10px solid #ea5455;
  border-top: 1px solid #ea5455;
  border-radius: 7px;
  width: 90%;
  margin: 30px;
  box-shadow: none;
  transition: all .3s linear;
  transform: translateY(0) scale(0.9, 0.9);
  -webkit-transform: translateY(0) scale(0.9, 0.9);
}

.card-body:hover,
.card-body:active {
  transform: translateY(-20px) scale(1, 1) !important;
  -webkit-transform: translateY(-20px) scale(1, 1) !important;
}

Here is a sandbox I made to show that the transition is not smooth and doesn't work but the transform does work: https://codesandbox.io/s/transition-problem-bp5dk

Answer 1

try adding the transition line transition: all.3s linear; into your hover and active pseudo classes

Answer 2

I copied your code and it works fine. Make sure that your current css file is already loaded (view the page source), it's common issue.