【骚气的动效】无限循环往下往复淡入淡出运动，通常用于向下箭头，提示用户可以往下滚动或者点击展开
生活随笔
收集整理的這篇文章主要介紹了
【骚气的动效】无限循环往下往复淡入淡出运动，通常用于向下箭头，提示用户可以往下滚动或者点击展开
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
?
/* 無限循環往下往復淡入淡出運動 */%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 */}}總結
以上是生活随笔為你收集整理的【骚气的动效】无限循环往下往复淡入淡出运动，通常用于向下箭头，提示用户可以往下滚动或者点击展开的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【骚气的动效】外发光涟漪波纹动画、向外辐
- 下一篇： 如何在本地安装tomcat、jdk并且配