CSS Div出现并消失动画？

Question

我试图制作一个简单的CSS动画，以便当一个人点击一个按钮时，它会显示一条简单的信息（比如玩家开始时的蒸汽）

我正在尝试学习CSS，我做的是这样的：

@keyframes item-adcionado {
    0% {
        z-index: -100;
        opacity: 0;
    }
    50% {
        z-index: 200;
        opacity: 1;
    }
    100% {
        z-index: -100;
        opacity: 0;
    }
}
@-webkit-keyframes item-adcionado {
    0% {
        z-index: -100;
        opacity: 0;
        bottom: 0%;
    }
    50% {
        z-index: 200;
        opacity: 1;
        bottom: 5%;
    }
    100% {
        z-index: -100;
        opacity: 0;
        bottom: 0%;
    }
}
.item-nao-adicionado {
    z-index: -100;
    width: 10%;
    height: 5%;
    opacity: 0;
    background-color: white;
    box-shadow: 0px 0px 25px #696969;
    padding: 25px;
    border-radius: 20px;
    position: fixed;
}
.item-adc {
    z-index: -100;
    width: 10%;
    height: 5%;
    opacity: 0;
    background-color: white;
    box-shadow: 0px 0px 25px #696969;
    padding: 25px;
    border-radius: 20px;
    position: fixed;
    animation: item-adcionado 10s ease;
    -webkit-animation: item-adcionado 10s ease;
    animation-fill-mode: forwards;
}

div：

<div class="item-nao-adicionado" id="item-nao-adicionado"><h2>Jogo adicionado ao carrinho</h2></div>

更改代码：

document.getElementById("item-nao-adicionado").className = "item-adc";