先上图：

Html部分：

<div className={style.down} />

less部分：

.down {
    height: 50px;
    width: 30px;
    display :inline-block;
    position: relative;
    left: 30px;
}

.down::before {
    content: "";
    height: 22px;
    width: 22px;
    border-width: 4px 4px 0 0;
    border-color: #1890ff;
    border-style: solid;
    transform: rotate(135deg);
    position: absolute;
  }
  .down::after {
    content: "";
    height: 22px;
    width: 22px;
    top: 13px;
    border-width: 4px 4px 0 0;
    border-color: #1890ff;
    border-style: solid;
    transform: rotate(135deg);
    position: absolute;
  }

// 封装的动画效果
.keyframesFunction (@name,@content){
    @keyframes @name{
        @content();
    }      
}
//引用时写进所需要的css样式中
.down{
    .keyframesFunction (down,{
        0% {bottom: 30px;}
        100% {bottom: 10px;}
    });
    animation: down 1s infinite;
}