<div class="cp_arrows">
  <div class="cp_arrow"></div>
</div>

.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp_arrows .cp_arrow,
.cp_arrows .cp_arrow:before {/*矢印全体の設定*/
  position: absolute;
  content: '';
  border-style: solid;
  border-color: transparent #d81b60 #d81b60 transparent;
}
.cp_arrows .cp_arrow {/*大きい方の矢印*/
  width: 36px;
  height: 36px;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.cp_arrows .cp_arrow:before {/*小さい方の矢印*/
  width: 20px;
  height: 20px;
  border-width: 0 2px 2px 0;
  animation: arrow-move10 2s infinite ease-in-out;
}
@keyframes arrow-move10 {
    0% { opacity: 0.3;}
    5% { opacity: 1;}
  100% { transform: translate(-5px, -5px); opacity: 0;}
}