前端鼠标移入后内容滑入的动画

效果

相当于一个小小的卡片，鼠标移到上面去的时候，会显示一些详细信息，但是详细信息是依靠一个移动的动画效果实现的，下面来让我们看看这种效果具体是怎样实现的

实现

创建所有的动画的基本原理就是，将一套 CSS 样式逐渐变化为另一套CSS样式。
像上图这种简单的动画，首先就是在图片的位置加一个hover
hover里面添加

animation: slider 0.8s; //slider是我命名的动画名字 不是关键字 后面的时间是动画时间

具体animation在CSS中的语法是这样的

然后为slider这个动画名字 添加规则

@keyframes slider {
  0% {
    top: 100%;
    opacity: 0;
    background-color: #bedbf900;
    height:194px;
  }
  20% {
    top: 20%;
    opacity: 0;
    background-color: #bedbf900;
    height:194px;
  }
  100% {
    top: 0;
    opacity: 1
  }
}

@keyframes 在CSS中的语法是这样的