@keyframes slide-top{ from{ transform: translateY(100%); /* opacity: 0; */ } to{ transform: translateY(0); /* opacity: 1; */ } } @keyframes slide-bottom{ from{ transform: translateY(0); /* opacity: 0; */ } to{ transform: translateY(100%); /* opacity: 1; */ } } @keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes fade-out{ from{ opacity: 1; } to{ opacity: 0; } } @keyframes scaleB{ from{ transform: scale(0.5); } to{ transform: scale(1); } } @keyframes scaleS{ from{ transform: scale(1); opacity: 1; } to{ transform: scale(0); opacity: 0; } } @keyframes roate{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } } @keyframes tiaowu { from { height: 25rpx; } to { height: 0rpx; } } @keyframes tiaowu2 { from { height: 10rpx; } to { height: 25rpx; } } @keyframes tiaowu3 { 0% { height: 18rpx; } 50% { height: 25rpx; } 100% { height: 5rpx; } } .tiaowu { animation: tiaowu .5s ease infinite alternate; } .tiaowu2 { animation: tiaowu2 .5s ease infinite alternate; } .tiaowu3 { animation: tiaowu3 .5s ease infinite alternate; } .roate{ animation: roate .7s linear infinite; } .slide-top{ animation: slide-top .3s ease forwards; } .slide-bottom{ animation: slide-bottom .3s ease forwards; } .fade-in{ animation: fade-in .3s ease forwards; } .fade-out{ animation: fade-out .3s ease forwards; } .scaleB{ animation: scaleB .3s ease forwards; } .scaleS{ animation: scaleS .3s ease forwards; }