@keyframes Appear{ from { opacity: 0; } to { opacity: 1; } } @keyframes Disappear{ from { opacity: 1; } to { opacity: 0; } } @keyframes itemShow { from { opacity: 0; transform: translateY(250px); } to { opacity: 5; transform: translateY(0px); } } @keyframes itemIdle { 0% { transform: translatey(0px); } 50% { transform: translatey(-10px); } 100% { transform: translatey(0px); } } .chestAppear { animation: Appear .2s ease 0s 1 normal forwards; } .chestDisppear { animation: Disappear .2s ease 0s 1 normal forwards; } .itemShow { animation: itemShow 1s ease 0s 1 normal forwards; } .itemIdle { animation: itemIdle 1.5s ease 0s infinite normal forwards; } .openingPanel{ display:flex; flex-direction:column; align-items:center; position:relative; height: 500px; } .chest { width: 500px; height: 500px; z-index: 3; position: absolute; pointer-events: none; } .chestOpen { opacity: 0; z-index: 3; } .chestOpenBottom { opacity: 0; z-index:5; } .button { width: 11rem; text-decoration: none; text-align: center; color: white; cursor: pointer; background: url('Images/btn1.png') center center/contain no-repeat; background-size: 100% 100%; font-family: SilkscreenNormal; line-height: 26px; padding-top: 6px; font-family: Minecraft; } .button:hover { background: url('Images/btn2.png')center center/contain no-repeat; background-size: 100% 100%; } .openBtn { position: absolute; bottom: 0; z-index: 10; width: 400px; padding-bottom: 7px; } .item { opacity: 0; z-index: 4; width: 128px; height: 128px; border: 1px solid; overflow: hidden; position: absolute; } .itemName { position: absolute; top: 0; color: white; text-align: center; background-color: rgba(0, 0, 0, .4); width: 128px; font-size: .75em; } .costDiv { position:absolute; right: 5px; top: 5px; }