css tip提示动画

.tipCoin{
        position: absolute;
        z-index: 2;
        font-size: 3rem;
        color: #fff;
        text-align: left;
        top:39px;
        left: 33px;
        background: #A8C71B;
        padding: 8px 10px;
        border-radius: 15px;
        -webkit-animation: fadeOutUp 2s ease 1s 1 both;
    }    

 

.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}
    @-webkit-keyframes fadeOutUp{0%{opacity:1}
    100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
    }
    @keyframes fadeOutUp{0%{opacity:1}
    100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
    }
    
    @-webkit-keyframes fadeOutDown{0%{opacity:1}
    100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
    }
    @keyframes fadeOutDown{0%{opacity:1}
    100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
    }