css箭头动画

    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    //添加infinite类，动画多次执行
    .animated.infinite {
       -webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
    }
    //右箭头
    @keyframes bounceRight {
      0%,
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }

      50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
      }

      80% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
      }
    }
    .bounceRight {
      -webkit-animation-name: bounceRight;
      animation-name: bounceRight;
    }
    //左箭头
    @keyframes bounceLeft {
          0%,
          100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }

          50% {
            -webkit-transform: translateX(6px);
            transform: translateX(6px);
          }

          80% {
            -webkit-transform: translateX(3px);
            transform: translateX(3px);
          }
    }
    .bounceLeft {
      -webkit-animation-name: bounceLeft;
      animation-name: bounceLeft;
    }
    //下箭头
    @keyframes bounceDown {
      0%,
      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      50% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
      }
      80% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
      }
    }
    .bounceDown {
      -webkit-animation-name: bounceDown;
      animation-name: bounceDown;
    }