[英]css transition doesn't work properly on my card div
I am having issues figuring out what is wrong with my card div.我在弄清楚我的卡片 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.
我试图添加一个小的过渡,其中 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;
}
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这是我制作的一个沙箱,用于显示过渡不平滑且不起作用,但转换确实有效: https://codesandbox.io/s/transition-problem-bp5dk
try adding the transition line transition: all.3s linear;
尝试添加过渡线
transition: all.3s linear;
into your hover and active pseudo classes进入你的 hover 和活跃的伪类
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.
确保您当前的 css 文件已经加载(查看页面源代码),这是常见问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.