Arrow CSS

poké_select_arrow.html

<i class="arrow"></i>
<style>
  .arrow {
    position: absolute;
    font-size: 4em;
    -webkit-animation:ease-in-out infinite alternate;
    -webkit-animation-name: run;
    -webkit-animation-duration: 1.15s;
  }

  @-webkit-keyframes run {
      0% { left: 0;}
      50%{ left: 1em;}
      100%{ left: 0;}
  }

  .arrow:before, .arrow:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: 2em;
    height: 0.5em;
    background: black;
    -webkit-border-radius: 0.4em;
    border-radius: 0.4em;
  }

  .arrow:before, .arrow:after {
    left: 0;
    top: 1.75em;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  .arrow:after {
    top: 0.65em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
</style>