小程序,显示隐藏动画;位移动画, 底弹窗动画,旋转动画
.root { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; animation:fadenum 0.6s; } @-webkit-keyframes fadenum{ /*设置内容由隐藏变为显示*/ 0%{opacity: 0;} 100%{opacity: 1;} }
.root { position: fixed; width: 100%; bottom: 0; background: white; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx; animation: fadeBottomIn 0.3s; } @keyframes fadeBottomIn {/*位移动画*/ 0% { transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: none; transform: none; } }
底弹窗动画:
.root { height: 50vh; width: 100%; position: fixed; bottom: 0; background: white; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx; animation-name: slideContentUp; animation-duration: 0.3s; } @keyframes slideContentUp { from { transform: translateY(100%); /*设置为正数则底部弹出来,负数则相反*/ } to { transform: translateY(0%); } }
旋转动画:
.loading { width: 150rpx; height: 150rpx; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; animation:myRotate 1s linear infinite; z-index: 999; } @keyframes myRotate{ 0%{ -webkit-transform: rotate(0deg);} 50%{ -webkit-transform: rotate(-180deg);} 100%{ -webkit-transform: rotate(-360deg);} }