【骚气的动效】无限循环往下往复淡入淡出运动，通常用于向下箭头，提示用户可以往下滚动或者点击展开

/* 无限循环往下往复淡入淡出运动 */

%auto-down-animate {
    animation: auto-down-animate 1s ease-in-out infinite;
    -moz-animation: auto-down-animate 1s ease-in-out infinite;
    /** Firefox */
    -webkit-animation: auto-down-animate 1s ease-in-out infinite;
    /** Safari 和 Chrome */
    -o-animation: auto-down-animate 1s ease-in-out infinite;
    /** Opera */
    @keyframes auto-down-animate {
        0% {
            opacity: 0;
            top: 0px;
        }
        50% {
            opacity: 1;
            top: 13px;
        }
        100% {
            opacity: 0;
            top: 27px;
        }
    }
    @-moz-keyframes auto-down-animate {
        0% {
            -moz-transform: rotate(0deg);
        }
        50% {
            -moz-transform: rotate(180deg);
        }
        100% {
            -moz-transform: rotate(360deg);
        }
    }
    @-webkit-keyframes auto-down-animate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    @-ms-keyframes auto-down-animate {
        0% {
            -ms-transform: rotate(0deg);
        }
        50% {
            -ms-transform: rotate(180deg);
        }
        100% {
            -ms-transform: rotate(360deg);
        }
    }
    @-o-keyframes auto-down-animate {
        0% {
            -o-transform: rotate(0deg);
        }
        50% {
            -o-transform: rotate(180deg);
        }
        100% {
            -o-transform: rotate(360deg);
        }
    }
}

/*移入终止向下无线循环动效*/
&:hover {
        &::after {
          top: 0;
          bottom: 0;
          animation-iteration-count: 0;
          -webkit-animation-iteration-count: 0; /* Safari 和 Chrome */
        }
      }

 

本文地址：https://blog.csdn.net/qq_37860634/article/details/107375433