css3语法动画实现移入移出动画

在我设计页面时候遇到了一个问题,我想实现一个div鼠标移入时,div缓慢向上移动一段距离,鼠标移出时再缓慢移出到原来的位置,在网上翻阅了很多资料终于把这个功能给实现了。只使用两行代码就实现了,希望对大家有所帮助。

实现代码

.main-card {
  cursor: pointer;
  transition: transform .4s;
}

.main-card:hover {
  color: #f1404b;
  transform: translateY(-5px);
}