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

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

 

 

/* 无限循环往下往复淡入淡出运动 */%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 */}}

更多相关: