css 過渡在我的卡片 div 上無法正常工作

Question

我在弄清楚我的卡片 div 有什么問題時遇到了問題。 我試圖添加一個小的過渡，其中 div 彈出一點平滑 animation 但過渡不起作用，因為它立即彈出而沒有任何平滑 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;
}

這是我制作的一個沙箱，用於顯示過渡不平滑且不起作用，但轉換確實有效： https://codesandbox.io/s/transition-problem-bp5dk

Answer 1

嘗試添加過渡線transition: all.3s linear; 進入你的 hover 和活躍的偽類

Answer 2

我復制了你的代碼，它工作正常。 確保您當前的 css 文件已經加載（查看頁面源代碼），這是常見問題。